时间戳

首页 > 解决方案 > Boostrap 4 中的 Flex 布局

bootstrap-4 - Boostrap 4 中的 Flex 布局

问题描述

我试图做一个列布局，将每个单元格放在另一个单元格的右侧，直到它达到容器宽度。然后，后面的其他 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>

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

标签： bootstrap-4

解决方案

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

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

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

推荐阅读