自举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解释塔系统中伟大而有趣的德泰。