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

Answer 1

在这种特定情况下,没有区别.

但是,由于这些原因,将cols.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个cols (4x1)
• xs宽度为2行的2个cols (2x2)

同样,对于单独的.rowdiv ,这是不可能的.但是,由于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>

演示版的演示