6

I'm currently investigating the use of Twitter bootstrap as a foundation for my future web development projects for clients. I have been through all of the standard documentation on their Github page and from my understanding, to use the grid layout effectively, your rows must only contain a total of twelve columns (made up of different elements or a single element).

With this in mind I have conducted a small test with some text spanning 4 columns in a row along with an offset div spanning 6 columns. This seems to work fine however, I have then tried to include a single row contained a div spanning 3 columns that is offset by 9 columns (still totalling 12) to give the impression that the content within the div is floated right on the page. The issue is that this appears fine when the window mode is suited to a desktop however as I begin to scale the window, the contents of the div are pushed out of the overall container. If I continue to scale down the window, the elements stack as I expect for the mobile view.

My question is, why is this behaving in this way? My understanding was that as long as there were 12 columns the content would remain encased within their external container.

My code can be found below. There is lots of inline css but this is just for testing purposes. This is stock bootstrap with all options checked at the customisation stage meaning that all of the responsive options are included.

<!DOCTYPE html>
<html>
     <head>
     <title>Bootstrap Example</title>
     <meta name="viewport" content="width-device-width, initial-scale=1.0">
     <!--BOOTSTRAP-->
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
     </head>
<body>
    <div class="container-fluid" style="border: 1px solid #cccccc">
      <div class="row-fluid">
        <div class="span4">This is a div spanning 4 columns</div>
        <div class="span6 offset2">This is a div spanning 6 columns. It should appear alongside the column spanning 4 columns.</div>
        </div>
      <div class="row-fluid">
        <div class="span3 offset9">
            <form class="form-search">
                <div class="row-fluid">
                    <div class="input-append span2">
                        <input type="text" class="input-medium search-query">
                        <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button>
                    </div>
                </div>
            </form>
        </div>
    </div>  
   </div>
  </body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

This occurs whether I use the fluid layout or not. In the fluid example the searchbox will appear as if it's going off the screen. In the fixed example it will overlay the grey border of the container.

jezzipin
  • 4,110
  • 14
  • 50
  • 94

2 Answers2

4

Have have add your code here: http://bootply.com/66598

The image below show your problem / question (i think): enter image description here

To understand your problem you will have to study the grid and understand the difference between the default grid and the fluid grid, see: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

Your problem will happen on screens bigger as 767px width. Below this width columns (div with class="span{x}") will stack. On big screens the problem will don't happen also.

The default grid (Twitter's Bootstrap 2.x):

When nesting rows the child row gets a total span which sum up to the span of its parent.

Example:

<div class="row">
<div class="span6">
<!--nesting-->
    <div class="row">
    <div class="span3"></div>
    <div class="span3"></div>
    </div>
</div>
<div class="span6">
</div>
</div>

In the grid the span classes have a fixed width in pixels (depending on screen width), see:
Between 768px and 980px screen width: Every span1 will be 940 - (11 gutters of 20px) /12 = 60px (above the 980px (1170-11*30)/12 = 70px).

Now your problem you have set: <input type="text" class="input-medium search-query"> The .input-medium will give this input a fixed width of 150px and the "search" button take also space (75px;). You put this in a span2 (<div class="input-append span2">) witch is in a span 3 (<div class="span3 offset9">). On the default 940 grid a span3 got a width of 3x60 + 2x20 = 220px; while your seachbox takes 75+150 = 225px. For this reason your searckbox breaks out of the grid. A span4 won't have this problem. Of course it will also breaks out your span2.

The fluid grid (Twitter's Bootstrap 2.x and Twitters Bootstrap 3):

In the fluid grid every column (span{x}) of get a percentage of the width of it's parent. When nesting the child row can be split in 12 columns again.

Example:

<div class="row-fluid">
<div class="span6">
<!--nesting-->
    <div class="row">
    <div class="span6">50% of the parent and 25% of the grid</div>
    <div class="span6">50% of the parent and 25% of the grid</div>
    </div>
</div>
<div class="span6">
    <div class="row">  
    <div class="span12">100% of the parent and 50% of the grid</div>
    </div>
</div>
</div>

In your case your searchbox is nested in a span2 in a span3. The span3 will get about 25% of the grid width. When 25% of your grid width will be smaller as 225px the searchbox will break out the grid. So your problem will start around a screen width of 4 x 225 = 900px (just below the default grid of 940 pixels). Also here it will help to put your searckbox in a span 4 or 5. NOTE <div class="input-append span2"> will have a width 16,6% of 25% of the grid (very small).

Possible solution: Use a pull-right class for your searchbox:

  <div class="row-fluid">
    <div class="span3 offset9">
        <form class="form-search">

                <div class="input-append pull-right">
                    <input type="text" class="input-medium search-query">
                    <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button>
                </div>

        </form>
    </div>
</div>
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
1

I had a similar case. Switched from container (fixed-width) to container-fluid (full-width) It did work for me. Good luck

Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

http://getbootstrap.com/css/#grid

Community
  • 1
  • 1
MThi
  • 323
  • 2
  • 5