引导行与让列换行

【问题标题】：Bootstrap row vs let column wrap引导行与让列换行
【发布时间】：2021-08-14 19:56:58
【问题描述】：

创建新行与让行换行有什么不同吗？

例如：

让列换行。

<div class="row">
    <div class="col-6">Col-1</div>
    <div class="col-6">Col-2</div>
    <div class="col-6">Col-3</div>
    <div class="col-6">Col-4</div>
</div>

新行

<div class="row">
    <div class="col">
        <div class="row">
            <div class="col">Col-1</div>
            <div class="col">Col-2</div>
        </div>
        <div class="row">
            <div class="col">Col-3</div>
            <div class="col">Col-4</div>
        </div>
    </div>
</div>

假设我不会设置内部行的样式，它们似乎具有相同的功能。是这样吗？一种方式比另一种更好，或者至少更惯用吗？

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

在您展示的特定情况下，不，没有区别，因为只使用了一个断点（xs 默认断点）。

然而，如果您想在不同断点处创建具有不同宽度的响应式布局，则首选第一个示例。

例如，假设您希望在 md 和更大的设备上使用 4 列，而在移动设备上使用 2 列。您将使用具有多断点列的单行...

<div class="container">
    <div class="row">
        <div class="col-6 col-md-3">Col-1</div>
        <div class="col-6 col-md-3">Col-2</div>
        <div class="col-6 col-md-3">Col-3</div>
        <div class="col-6 col-md-3">Col-4</div>
    </div>
</div>

然而，将列分成 2 行根本不适用于这种响应式布局。

Demo

相关：Bootstrap row and col explanation

【讨论】：