twitter-bootstrap - 为什么要使用 Bootstrap .w-100 类将一行的列拆分为两行，而您只能制作两行？

Question

在 https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row 的 Bootstrap 文档的此页面上他们举了这个例子:

<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

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

但是，保留 单个 .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 上 1 行 4 列宽度 (4x1)

xs 上 2 行的 2 列宽度 (2x2)

同样，这对于单独的 .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>

Demo of the layouts