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

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

但是，出于这些原因，将 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宽度（4x1）
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类将行的列分成两行，当你只能创建两行时？

1 个答案: