嵌套列的良好做法？

Question

我无法找到任何的规则，规定这是否是一件应该做的事。自举明确概述之中其规则如下：

• 行必须被放置为适当对准和填充一个.container（固定宽度）或 .container流体（全宽）内

• 用行来创建列

• 内容应放在列内，只列可以
  行的直接孩子的水平组

所以从这个笔者的结论是，我确实想自成体系将有一个container类网站的每个部分。在此范围内，我们将有一个row，其中我们有一个column。像这样：

<div class="container"> 
    <div class="row"> 
     <div class="col">COL 1 of 2</div> 
     <div class="col">COL 2 of 2</div> 
    </div> 
</div> 

现在的问题是，规则指定仅列可能是行的直接孩子，但它并没有说柱的孩子应该是什么。如果我想要在另一列中“嵌套”另一组双列，我会像写一个或两个情况那样编写它吗？

<div class="container"> 
    <div class="row"> 
     <div class="col"> <!--Columns within columns without a row--> 
      <div class="col"> 
      <div class="col"> 
     </div> 
     <div class="col"> <!--Row nested before nesting columns--> 
      <div class="row"> 
       <div class="col"> 
       <div class="col"> 
      </div> 
     </div> 
    </div> 
</div> 

两者都在实际制作页面方面工作，但我不知道什么被认为是“良好实践”。两种书写方式都有明显的局限性。在我的情况下，我希望“列”填充动态生成的元素数量，在不同的屏幕分辨率/响应大小将对齐，所以行包装不是一个选项。我不知道每行有多少个元素，这会在下面的行不需要时破坏和换行。

那么，是不是还好列中嵌套列无行持有的孩子吗？

Answer 1

嵌套行是更好的语义，并且在一些边缘的情况下，保持该设计。然而，这是意见，但基于最佳实践的观点。

我之前把该行的列只是为了你的意图明确，使其更加模块化。

这是最好想想作为一个模块，并问自己：“我能解除标记的这一部分离开其位置，并把它放在其他地方的页面上，它仍然保持其形式？”通过将其封装在一行中，您可以对该问题回答“是”。当然，它总是在我们如何看待我们的结构化标记和CSS仅在标记是必要的，是模块化的，但一些概念如SMACSS，面向对象的CSS等把...带头之间的战斗似乎它是共识为了维持模块化，需要额外的标记。

Answer 2

你应该把所有嵌套.row S的内部一个.container的遏制切缘阴性，只有鸟巢.col内.row：

<div class="container"> 
    <div class="row"> 
     <div class="col"> <!--Row nested before nesting columns--> 
      <div class="container"> 
      <div class="row"> 
       <div class="col"> </div> 
       <div class="col"> </div> 
      </div> 
      </div><!-- .container --> 
     </div> 
    </div> 
</div>