有没有办法让 Bootstrap Cols 更自然地流动？

Question

目前我正在使用 BS3（还不能转到 4，卡片看起来不错）而且我想不出让列正确流动的方法。我把所有东西都放在同一个“行”中，但它们没有“自然地”包裹——有没有办法做到这一点？这是我的意思的甜蜜绘画图，谢谢：

Answer 1

仅使用 bootstrap 你做不到，但是你可以通过结合 bootstrap 的网格功能和 masonry 库来做到这一点，你会得到这样的东西

<div id="container">
  <div class="col-sm-4">...</div> // col instead of item
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

这是一个工作演示

Answer 2

就像@aitnasser 说的那样，如果您想让 Bootstrap 以您喜欢的方式工作，Masonry 库是最好的起点。

就我个人而言，我现在最喜欢Isotope 库，只是作为一个附加项。但是，如果您需要更多地依赖 JQuery，那么您应该真正关注 JQuery 对 Masonry 的专用实现。

我知道你的问题有点宽泛，所以请随时提出任何可能出现的问题，或提出问题。

Answer 3

在 bootstrap 4 中有这个解决方案。https://getbootstrap.com/docs/5.0/examples/masonry/