'Bootstrap grid wraps on less than 12 columns

In this jsfiddle, I am trying to get finer control by nesting columns

Code

<div class='row'>
  <div class="col-md-6">
    <div class='row'>
      <div class="col-md-6">
        <div class='row'>
          <div class="col-md-1">1+</div>
          <div class="col-md-6">6+</div>
          <div class="col-md-5">5=12</div>
        </div>
      </div>
      <div class="col-md-6">
        <div class='row'>
          <div class="col-md-2">2+</div>
          <div class="col-md-6">6+</div>
          <div class="col-md-4">4=12</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">test</div>
</div>

Result

demo

However depending on the distribution, the columns will wrap, even though both add up to 12.

Why do the rows wrap on some (1 + 6 + 5) and not others (2 + 6 + 4)?

And is there a limit to the number of columns I can nest?

htmlcsstwitter-bootstraptwitter-bootstrap-3


Solution 1:[1]

you are missing class .container to wrap the main .row, what happens is that 1/6/5 will wrap first then 2/6/4 just that. Hit full-page link to see result.

.wrap {
  border: red solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='row'>
    <div class="col-xs-6 col-md-6">
      <div class='row'>
        <div class="col-xs-6 col-md-6 wrap">
          <div class='row'>
            <div class="col-xs-1 col-md-2">1+</div>
            <div class="col-xs-6 col-md-6">6+</div>
            <div class="col-xs-5 col-md-4">5=12</div>
          </div>
        </div>
        <div class="col-xs-6 col-md-6 wrap">
          <div class='row'>
            <div class="col-xs-2 col-md-2">2+</div>
            <div class="col-xs-6 col-md-6">6+</div>
            <div class="col-xs-4 col-md-4">4=12</div>
          </div>
        </div>
      </div>   
    </div>
    <div class="col-xs-6 col-md-6 wrap">test</div>
  </div>
</div>

Solution 2:[2]

I had another case where css from another library had overridden the bootstrap box-sizing property from box-sizing: border-box; to box-sizing: content-box;. Then the left and right padding on col-classes made the columns wrap before reaching the 12 columns available.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 pekaaw

Related Questions