最佳实践列包装引导

Question

根据此link，您可以使用带bootstrap的列包装。

下面是我的代码的一部分：

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

谢谢!

Answer 1

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

Col1-*类也可以在.row外部使用，以赋予元素特定的宽度。只要将列类用作行的非直接子级，就会省略填充。

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

Answer 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的默认行为。