Bootstrap 4 中的 Flex 布局答案

【问题标题】：Flex layout in Boostrap 4Bootstrap 4 中的 Flex 布局
【发布时间】：2019-04-28 04:33:55
【问题描述】：

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

【问题讨论】：

在您的row div 上，添加一个类justify-content-end 或flex-row-reverse；如果我理解正确，那应该对你有帮助，请告诉我！
我不明白问题是什么。具体来说，“示例使用类为“行”的容器，但是，我不需要，因为我事先不知道容器宽度可以容纳多少列”没有意义。
这样我需要事先知道一行中有多少元素。我添加了一个带有“d-flex”类的 div，所有元素都排成一行，添加了一个水平滚动条以查看所有其他元素。如果容器网格只允许 2 个元素，我需要将这 2 个元素和另一个元素显示到下一行，依此类推
您可以在row 中放置任意数量的列，它们将根据需要换行到下一行
@IvanS95 谢谢....该代码有效....我添加了 2 个容器 div，一个带有“container-fluid”类，内部带有“row justify-content-end”类.... 在其中，我添加了带有“
”的元素，它们按照我的意愿进行渲染。

标签： bootstrap-4

【解决方案1】：

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

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

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

【讨论】：