html - 嵌套列的好习惯？

Question

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

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

• 使用行创建水平列组

• 内容应该放在列中，并且只有列可以
  行的直接子级

因此，据此我得出结论，我希望独立的网站的每个部分都将有一个 container 类。在其中我们有一个行，在其中我们有一个列。像这样:

<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

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