引导程序 4：添加行或添加 col-12 之间的区别？

【问题标题】：bootstrap 4: difference between adding a row or adding a col-12?引导程序 4：添加行或添加 col-12 之间的区别？
【发布时间】：2019-05-09 19:59:26
【问题描述】：

我试图澄清这个疑问，但没有指定 bootstrap 4 的文档。

这两个sn-p有什么区别：

<div class="container">
 <div class="row">
   <div class="col-12">col-12</div>
 </div>
 <div class="row">
   <div class="col-6">col-6</div>
   <div class="col-6">col-6</div>
 </div>
</div>

而且，只使用一个 .row：

<div class="container">
 <div class="row">
   <div class="col-12">col-12</div>
   <div class="col-6">col-6</div>
   <div class="col-6">col-6</div>
 </div>
</div>

即：添加一个特定的新 .row，或者只是添加一个 col-12 ？

【问题讨论】：

标签： html responsive-design bootstrap-4

【解决方案1】：

如果您在一行中添加超过 col-12，引导系统会在您的示例中的 col-12 之后中断。

<div class="container">
 <div class="row">
   <div class="col-12">col-12</div>
   <div class="col-6">col-6</div>
   <div class="col-6">col-6</div>
 </div>
</div>

这样写完全没问题。

【讨论】：

所以基本上，两者都很好，可以使用。在这一点上，我更喜欢这个选择，因为我不必添加另一个 .row
这正是我大部分时间所做的。如果您通过函数添加列并且不知道后面会有多少列，这也很有用。
如果您使用“行”，您可以确保新行开始。如果您依赖 cols 并在某些时候更改 cols，那么您还必须调整所有后续 cols 以确保包装仍然正确。