嵌套列的好习惯？

Question

我找不到任何关于这是否应该做的规则。 Bootstrap 在其规则中清楚地概述了以下内容：

• 行必须放置在 .container（固定宽度）或 .container-fluid（全角）用于正确对齐和填充

• 使用行来创建水平列组

• 内容应放在栏内，并且只能放在栏内
  行的直接子代

因此，由此我得出结论，我确实想要独立的网站的每个部分都有一个 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

您应该将任何嵌套的 .rows 放在 .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>

Answer 2

嵌套行在语义上更好，在某些边缘情况下可以保持设计。然而，这是基于最佳实践的意见。

我将列放在前面的行只是为了清楚您的意图并使其更加模块化。

最好将其视为一个模块并问自己“我可以将这部分标记从它的位置抬起并放在页面上的任何其他位置并且它仍然保持它的形式吗？”通过将其封装在一行中，您可以对该问题回答“是”。当然，它始终是只添加必要的标记和模块化之间的一场战斗，但使用 SMACSS、面向对象的 CSS 等概念……在我们如何考虑构建标记和 CSS 方面发挥带头作用，似乎共识是为了保持模块化，添加了一些额外的标记。