时间戳

首页 > 解决方案 > 引导行与让列换行

twitter-bootstrap - 引导行与让列换行

问题描述

创建新行与让行换行有什么区别吗？

例如：

让列换行。

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

解决方案

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

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

例如，假设您想要 4-colsmd或更大，以及 2-cols 在移动设备上。您将使用具有多断点列的单行...

<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 行根本不适用于这种响应式布局。

演示

相关：引导行和列解释

推荐阅读