为什么使用 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 类和只创建两行有什么区别吗？

Answer 1

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

但是，由于这些原因，将 col 保持在单个.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>

---

响应式布局

另一个例子。假设您想要以下布局：

• 4 列横跨 1 行，宽度为 md (4x1(
2
• 列跨 2 行，宽度为 xs (2x2(

同样，使用单独的div .row 是不可能的。但是，由于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>

布局演示