twitter-bootstrap 为什么使用 Bootstrap 的 .w-100 类将一行的列拆分为两行，而您可以只创建两行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43405426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why use Bootstrap's .w-100 class to split a row's columns into two rows, when you could just make two rows?
提问by Al Sweigart
On this page in the Bootstrap documentation at https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-rowthey give this example:
在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>
This creates two rows with two equal-sized columns in each row. However, you can achieve this just by creating two rows:
这将创建两行，每行有两个相等大小的列。但是，您可以通过创建两行来实现这一点：
<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>
Is there any difference between using the .w-100CSS class and just creating two rows instead?
使用.w-100CSS 类和只创建两行有什么区别吗？
回答by Zim
In this specific case, there is no difference.
在这种特定情况下，没有区别。
However, keeping the cols in a single .rowis generally betterfor these reasons...
但是，由于这些原因，将cols.row保持在一个单一的状态通常会更好......
Column ordering
列排序
Suppose you instead want to switch the order of the first and last columns on mdand up. This would not be possible with separate .rowcontainers. Keeping all the colin a single .rowmakes it possible.
假设您想要切换第一列和最后一列的顺序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>
Responsive layouts
响应式布局
Another example. Suppose you instead wanted a layout of:
另一个例子。假设您想要一个布局：
- 4 cols across 1 row on
mdwidth (4x1) - 2 cols across 2 rows on
xswidth (2x2)
- 4 列跨 1 行
md宽度 (4x1) - 2 列跨 2 行
xs宽度 (2x2)
Again, this would not be possible with separate .rowdivs. But, since the w-100can be used responsively, this is possible by keeping all the cols in a single row.
同样，这对于单独的.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>
