为什么使用 Bootstrap 的 .w-100 class 将一行的列拆分为两行，而您只能做两行？

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 class 和只创建两行之间有什么区别吗？

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>

响应式布局

再举个例子。假设您想要一个布局：

1 行 4 列 md 宽度 (4x1)
2 行 2 列 xs 宽度 (2x2)

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

为什么使用 Bootstrap 的 .w-100 class 将一行的列拆分为两行，而您只能做两行？

Why use Bootstrap's .w-100 class to split a row's columns into two rows, when you could just make two rows?

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4