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。对于Bootstrap 3，它有already been answered here，而Bootstrap 4的工作方式相同。一个col-*-*标记中有超过12个row个单位，这是可以的。它被称为"column wrapping"。

来自Bootstrap docs ..

“如果在一行中放置超过12列，则每组都有额外的列将作为一个单元包裹到一个新行上。“

您只需要注意，如果您的列内容的高度不同，您应该使用responsive resets“清除”列，以便它们均匀包裹。

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

Bootstrap4 Alpha：使用<div class =“row”>

1 个答案: