在 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 类,只创建两行?
最佳答案
在这种特定情况下,没有区别。
但是,保留 单个 .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
关于twitter-bootstrap - 为什么要使用 Bootstrap .w-100 类将一行的列拆分为两行,而您只能制作两行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43405426/