引導電網不到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> 

結果

然而取決於分佈，t他的列將包裝，儘管兩者合計爲12.

爲什麼行在一些（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>