自舉3個嵌套行

Question

由於使用模板引擎當諸如枝杈（PHP）或Jinja2的（蟒）繼承HTML份的，我可能需要巢行象下面這樣：

<div class="container"> 
    <div class="row"> 
     <div class="row"> 
     </div> 

     ... 

     <div class="row"> 
     </div> 
    </div> 
    <div class="row"> 
     ... 
    </div> 
</div> 

然後我應該包內的行在列div如下：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="row"> 
      </div> 

      ... 

      <div class="row"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     ... 
    </div> 
</div> 

或者他們應該再次在容器中包裝？

Answer 1

您不應將它們包裝在另一個container中 - 容器是爲典型的單頁佈局設計的。除非它看起來很好/適合你的佈局，如果你真的想要這樣做，你可能想看看container-fluid。

tl; dr不包裝在另一個容器中。

Answer 2

您不應該將嵌套的行包裝在.container元素中，但是您應該應將嵌套在列中。 Bootstrap的row類具有負的左右邊距，這被col-X類的正左右邊距所抵消。如果您嵌套兩個row類而沒有中間類col-X，則您會得到兩倍的負邊距。

這一實例說明雙負邊距：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. --> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12" style="background: lime;"> 
 
      <div class="row"> 
 
       Here's my text! 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<!-- BAD! Second "row" missing wrapping "col", gets double negative margins --> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="row" style="background: tomato;"> 
 
      Where's my text? 
 
     </div> 
 
    </div> 
 
</div>

對於進一步閱讀，The Subtle Magic Behind Why the Bootstrap 3 Grid Works解釋塔系統中偉大而有趣的德泰。