Question

我试图做一个列布局，将每个单元格放置在另一个单元格的右边，直到达到容器宽度。然后，其他随后的div应该在下一行继续渲染，依此类推。

到目前为止，我所看到的所有示例均应执行以下操作：

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

所有示例都使用一个类为“行”的容器，但是，我不需要这样做，因为我事先不知道容器宽度中可以容纳多少列。

有没有一种方法可以使列自动在右侧排序。

例如，类似

<div style="float: left">...</div>
<div style="float: left">...</div>
<div style="float: left">...</div>
<div style="float: left">...</div>

但是使用Boostrap4。每个div都包含带有标签和输入字段的form_groups。

Answer 1

您可以通过在基本的row和col-*-*结构中添加一些类来获得所需的输出；要使每列向右对齐，您只需向justify-content-end添加一个row类，因为行具有display: flex属性，因此您可以将所有flex行为应用于行；如果有可用空间，列将被推到右侧；

此外，如果您想反转列的顺序，则还可以添加一个类flex-row-reverse，顾名思义，该类将以相反的顺序在行内呈现列。

工作示例 https://codepen.io/IvanS95/pen/gQjOvN

Boostrap 4中的Flex布局

1 个答案: