列 bootstrap 5 内的元素之间的间距相等

Question

因此，想象一下一个充满元素（div、段落、链接......）的引导列，我如何在该列内均匀地间隔这些元素，例如对齐之间的空间或周围的空间。我不需要边距或填充。我希望元素自动在列内垂直自由空间周围均匀分布。

在 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>

由于您希望元素在 y 轴上均匀分布，因此需要添加flex-column. 另请记住，您可以将任意数量的flex盒子嵌套在另一个盒子中。