列 bootstrap 内的元素之间等于 space 5

Question

所以想象一个 bootstrap 列充满了元素（div、段落、链接..），我如何 space 那些元素在该列内均匀分布，例如 space-对齐或 space-左右。我不想要边距或填充。我希望 elements 到 自动平等地 space 周围自由 space 垂直列 .

在 flex 的文档中，所有内容似乎都集中在行上，而列中的内容很少，它是在水平对齐列内的元素。

有什么办法可以达到预期的效果吗？

Answer 1

解决方案还可以将 flex 定位添加到您的列中。因此，您可以添加 bootstrap.

提供的额外类

  <div class="container">
    <div class="row">
      <div class="col d-flex flex-column justify-content-between">
        <!-- Here comes your content -->
      </div>
    </div>
  </div>

由于要均匀space元素为y轴，所以需要加上flex-column。还请记住，您可以将任意数量的 flex 个框嵌套在另一个框内。

列 bootstrap 内的元素之间等于 space 5

Equal space between elements INSIDE a column bootstrap 5

html

css

bootstrap-5