0

i am new to twitter bootstrap. Recently i started working on a project(a Q&A site) using twitter bootstrap 3 for designing.i have encountered a major problem with the designing.

At first the basic structure of my website which I followed throughout almost all web pages of my site :

<div class="container-fluid" >
   <nav class="navbar navbar-inverse" role="navigation">....</nav>
   <div class="jumbotron" > .... </div>
   <div class="row">
       <div class="col-md-1 text-center"> ... </div>
       <div class="col-md-1 text-center"> ... </div>
       <div class="col-md-7 text-center"> ... </div>
       <div class="col-md-1 text-center"> ... </div>
   </div>
</div>

My Problem :

my website works absolutely fine when my browser is maximized. All the problems starts when I Resize my browser or when I open my Website on my Android Mobile phone

  • All my Divs which are written with in Div.row , which are supposed to be alligned horizontally one besides another(i think the used float:left) are getting stacked. Its breaking entire structure of my website. they all are getting stacked one above another (vertically) upon browser resizing or when i open my site in a mobile phone
  • Even the structure of my nav bar is also getting broken. All the nav bar elemnts are also getting stacked instead of floating horizontally

What I Want :

i noticed that upon resizing or on mobile phone, Bootstrap rsizing text size according to screen size, which is very good and am very happy with thatbut what i want is

  • upon browser resizing or when i open my site in a mobile phone it Won't break the structure of my site , all the divs will be Horizontally aligned one besides another as it is when browser is maximized and to achieve this it will add a horizontal scroll bar upon browser resizing or when i open my site in a mobile phone

Here I did some MS-Paint to explain my problem

Fig 1 : What I am having on my laptop when Browser is Maximized :

enter image description here

Fig 2 : What I am getting upon browser resizing or when i open my site in a mobile phone

enter image description here

Fig 3 : What I want upon browser resizing or when i open my site in a mobile phone

enter image description here

My Try :

As i am new to bootstrap i didnt try to alter / cutomize too many in the css files . what i have tried is i have applied overflow-x:auto; on .container-fluid , .row , .nav but it didnt help me. no problem is solved

RbG
  • 3,181
  • 3
  • 32
  • 43
  • 2
    So you don't want your site to be responsive ? Check this question: http://stackoverflow.com/questions/17943264/how-to-use-twitter-bootstrap-3-for-non-responsive-site – drip Feb 16 '14 at 15:47
  • no... its breaking the entire structure of my site. its looking very ugly on mobiles and becoming very hard to use – RbG Feb 16 '14 at 15:48
  • That's what means your site to be "responsive" it brakes on smaller screens so that there won't be any horizontal scroll. When you turn off the responsive part of the bootstrap, it won't resize any more. a.k.a it will look the same on phone/tablet/desktop. – drip Feb 16 '14 at 15:50
  • @drip i cant find `variables.less` and `@grid-float-breakpoint` and `@screen-xs-max` .... where they reside???..how can i change them ?? – RbG Feb 16 '14 at 15:57
  • Skip that step, you are not using the less files. – drip Feb 16 '14 at 16:01
  • i made the Changes .. what they said to change in `.container` .. i made that change in both of `.container-fluid` and `.row` ... But still **no effect** ... everything is same as before ... why ??? – RbG Feb 16 '14 at 16:06
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47601/discussion-between-drip-and-ritabrata-gautam) – drip Feb 16 '14 at 16:08

1 Answers1

1

You're using col-md-#, which is intended for spacing over 768px but under 970px. If you want to maintain the layout regardless, you can use or apply additional styles for mobile (this is a feature of bootstrap 3).

I've kept your old classes intact as well as an example:

 <div class="row">
       <div class="col-xs-1 col-md-1 text-center"> ... </div>
       <div class="col-xs-1 col-md-1 text-center"> ... </div>
       <div class="col-xs-7 col-md-7 text-center"> ... </div>
       <div class="col-xs-1 col-md-1 text-center"> ... </div>
   </div>

Read this for more details: GetBootstrap

RbG
  • 3,181
  • 3
  • 32
  • 43
Mike Robinson
  • 24,971
  • 8
  • 61
  • 83
  • voted up... but its doing the job partially... now they are overlaping... i think horizontal scroll bar would fix this problem... – RbG Feb 16 '14 at 16:42