如何使用Bootstrap 4创建瀑布流（masonry）布局？

针对你想要的这种卡片无固定列宽、不规则排列的瀑布流布局，Bootstrap 4 默认的栅格系统和 Cards 组件确实没法直接满足，但可以通过以下几种方案结合 Bootstrap 来实现：

一、Bootstrap 基础 + 自定义 JS/CSS 方案 #

Bootstrap 的 12 列栅格可以作为宽度控制的基础，再配合自定义逻辑处理垂直排列：

• 利用 Bootstrap 的 col-* 类给不同卡片设置自定义宽度（比如 col-3、col-6、col-9），同时用 card 组件来快速搭建卡片样式，这部分完全兼容
• 给卡片容器设置相对定位，所有卡片设置绝对定位
• 用 JavaScript 维护一个「各列当前高度」的数组，每次插入新卡片时，找到当前高度最低的列，计算卡片的位置并设置 top 和 left 值，同时更新对应列的高度

这种方案的优势是完全自定义，能精准控制每一张卡片的尺寸和位置，和 Bootstrap 的样式体系完美融合。

二、结合成熟瀑布流插件 #

如果不想自己写复杂的定位逻辑，推荐使用专门的瀑布流插件，它可以和 Bootstrap 4 无缝配合：

• 引入插件后，给你的卡片容器添加初始化配置
• 插件会自动识别不同宽度的卡片，智能排列以减少空白，还支持响应式适配
• 卡片部分依然可以用 Bootstrap 的 card 组件来实现样式，只需要把卡片放到插件的容器中即可

看到你已经自行完成了该布局的实现，真的很厉害！这种非规整的瀑布流相比传统等宽瀑布流，对布局逻辑的要求更高，自定义方案虽然需要写更多代码，但灵活性拉满，完全能适配各种特殊需求。

内容的提问来源于stack exchange，提问作者yofisim