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>

现在我的问题是，规则指定仅列可能是行的直接子项，但它没有说明列的子项应该是什么。如果我想要＆＃34;筑巢＆＃34;另一列中的另一组双列，我会像一个或两个案例那样写吗？

<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>

两者都在实际制作页面方面起作用，但我不知道所考虑的是什么＆＃34;良好实践＆＃34;。两种写作方式都有明显的局限性。在我的情况下，我想要＆＃34;列＆＃34;要填充动态生成的元素数量，这些元素在不同的屏幕分辨率/响应大小上会对齐，因此行包装器不是一个选项。我不知道每行有多少元素，这会使以下行在不需要时断开并换行。

那么，将列嵌入列中而没有一行来保存子项是否可以？

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>

Answer 2

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

我之前要为该列添加一行，以便明确您的意图并使其更加模块化。

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

嵌套列的良好做法？

2 个答案: