Bootstrap grid wraps on less than 12 columns

Issue

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

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?

Solution

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>

Answered By - dippas