为什么使用Bootstrap的.w-100类将一行的列分成两行，而不是创建两个行？

Question

在Bootstrap文档的这一页上https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row，他们提供了以下示例：

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

这将创建两行，每行有两个相同大小的列。但是，您只需创建两行即可实现此目的:

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>

使用.w-100 CSS类和创建两个行之间有什么区别吗？

- Al Sweigart

Answer 1

在这种特定情况下，没有区别。

但是，通常将列放在单个.row容器中更好，原因如下...

列的顺序

假设您希望在md和更高版本上交换第一列和最后一列的顺序。如果使用单独的.row容器，则无法实现此目的。将所有col放在单个.row中使其成为可能。

<div class="row">
    <div class="col flex-md-last">col 1</div>
    <div class="col">col 2</div>
    <div class="w-100"></div>
    <div class="col">col 3</div>
    <div class="col flex-md-first">col 4</div>
</div>

---

响应式布局

另一个例子。假设你想要的是一个以下布局：

• 在md宽度上，有一排4列（4x1）
• 在xs宽度上，有两排各2列（2x2）

如果使用分离的.row divs，这将不可能实现。但由于w-100可以响应式地使用，因此将所有的列保持在单个行中是可能的。

<div class="row">
    <div class="col col-md-3">col 1</div>
    <div class="col col-md-3">col 2</div>
    <div class="w-100 hidden-md-up"></div>
    <div class="col col-md-3">col 3</div>
    <div class="col col-md-3">col 4</div>
</div>

布局演示

- Zim

---

在最新版本的Bootstrap中，hidden-md-up已被移除。您需要在后续版本中使用d-md-none。链接 - Vishal