Bootstrap网格包含少于12列

Question

在这个jsfiddle中，我试图通过嵌套列来实现更好的控制

代码

<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>

结果

然而，根据分布情况，列将会换行，即使两者都加起来。

为什么行包裹在某些（1 + 6 + 5）而不包含其他（2 + 6 + 4）？

我可以嵌套的列数是否有限制？

Answer 1

你缺少类.container来包装主.row，会发生的是1/6/5将首先包裹然后2/6/4。点击整页链接查看结果。

.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>