最佳实践列包装 Bootstrap答案

【问题标题】：Best practice column wrapping Bootstrap最佳实践列包装 Bootstrap
【发布时间】：2021-04-24 00:29:26
【问题描述】：

根据这个link，您可以在引导程序中使用列换行。

这是我的代码的一部分：

    <div class="row">
        <div class="col-12">
            1
        </div>
        <div class="col-7">
            2
        </div>
        <div class="col-12">
            3
        </div>
        <div class="col-6">
            4
        </div>
        <div class="col-6">
            5
        </div>
    </div>

它有效，但它是最好的解决方案吗？或者是否有必要每次都创建一行，这将给出：

    <div class="row">
        <div class="col-12">
            1
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            2
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            3
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            4
        </div>
        <div class="col-6">
            5
        </div>
    </div>

谢谢！

【问题讨论】：

标签： html css bootstrap-4 grid

【解决方案1】：

不，您不再需要行。来自 Bootstrap 5.0 文档：

.col-* 类也可以在 .row 之外使用，以赋予元素特定的宽度。每当列类用作行的非直接子级时，填充将被省略。

所以你可以使用你的第一种方法。

【讨论】：

【解决方案2】：

默认情况下，引导行设置为换行。因此，如果两列的宽度总和大于 12，则第二列将换行：

<div class="container">
    <div class="row">
        <div class="col-9">
            .col-9
        </div>
        <div class="col-4">
            .col-4
        <!-- Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped 
             onto a new line as one contiguous unit. -->
        </div>
        <div class="col-6">
            .col-6
        <!-- Subsequent columns continue along the new line. -->
        </div>
    </div>
</div>

如果默认行为对您有用，您不必每次都添加新行。

您需要新行的唯一时间是您打算使它们成为新行时：

<div class="container">
    <div class="row">
        <div class="col-5">1</div>
    </div>
    <div class="row">
        <div class="col-6">2</div>
        <div class="col-3">3</div>
    </div>
</div>

如果我不为第 2 列和第 3 列添加新行，默认情况下，第 2 列将位于第 1 列的同一行。

对我来说，我更喜欢第二种方式，因为这表明我希望列位于新行中。其他人不必猜测或知道 Bootstrap 默认行为。

【讨论】：