Bootstrap4 Alpha：使用 <div class="row">

Question

我有一个关于在 Bootstrap 4 Alpha.

中使用的问题

假设我们需要遵循 html div 结构

Box 50% width, Box 50% width

Box 50% width, Box 50% width

Box 50% width, Box 50% width

那个，这样说是不是更合适

变体 1:

<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>

<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>

<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>

或变体 2:

<div class="row">

<div class="col-lg-6"></div>
<div class="col-lg-6"></div>

<div class="col-lg-6"></div>
<div class="col-lg-6"></div>

<div class="col-lg-6"></div>
<div class="col-lg-6"></div>

</div>

由于 Bootstrap 页面上的所有示例都默认包含行，所以我无法判断这是否也适用于多个元素。

感谢您的帮助！

Answer 1

变体 2 will work. This has already been answered here for Bootstrap 3, and Bootstrap 4 works the same. It's ok to have more than 12 col-*-* units in a single row tag. It's called "column wrapping"。

来自 Bootstrap 文档..

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."

您只需要注意，如果您的栏内容的高度不同，您应该使用 responsive resets 到 "clear" 栏，以便它们均匀地环绕。

clearfix 重置示例： http://www.bootply.com/C4BMA2nDth