column-count 是最轻量但易翻车的瀑布流方案；视觉近似可用 css 多列，行为一致必须用 js；row+col 非瀑布流，因 flex 行布局强制等高；多列需独立容器、避免 .col 类、设 break-inside: avoid、处理图片加载与 ios 兼容性；masonry/isotope 需图片加载完成后再初始化。

column-count 是最轻量、也最容易翻车的方案；真要“类似瀑布流”，得先分清你到底要视觉近似，还是行为一致——前者用 css 多列就能凑合，后者必须上 js。

为什么 row + col 永远不是瀑布流

Bootstrap 的 .row 默认是 Flex 容器，所有 .col 按行切片，高度由该行最高项决定。哪怕你写 row-cols-3，它也只是把每行塞 3 个等高盒子，不是按列“砌砖”。常见现象：中间卡片很高，左右留大片空白；或者小卡片被拉伸变形。

• 别指望 row-cols-* 类能实现真正的高度错落
• display: flex; flex-wrap: wrap 配固定宽 + min-height 只能模拟，且响应式换列时容易错位
• 只要用了 .col-md-4 这类类名，就别初始化 Masonry 或 Isotope —— 它们会和 Flex 布局打架

column-count 要生效，容器必须“干净”

直接给 .row 加 column-count: 3，基本无效。因为 .col 自带 flex-basis、margin、甚至 float（v3），全都会破坏多列所需的纯块级流。

• 用独立容器，比如 <div class="masonry-container">，不套 <code>.row
• 子项用普通 <div>，删掉所有 <code>.col-* 类
• 必须设 break-inside: avoid，否则卡片可能被劈成两半（尤其含标题+图片时）
• column-gap 才管用，gap-4 这类 Bootstrap 类对多列无效

图片加载导致错位？这不是 bug，是必然

浏览器按初始高度（比如 <img> 没加载完时是 0）计算列高，图片加载后突然撑开，触发重排——看起来像“跳闪”或跨列错位。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 给 <img> 加 HTML width 和 height 属性（不是 CSS），预留空间
• 或统一用 aspect-ratio: 16/9 + object-fit: cover 控制缩放
• 避免用 background-image，它不参与 break-inside 计算
• iOS Safari 对 break-inside: avoid 支持不稳定，可降级为 break-inside: avoid-column

Masonry / Isotope 初始化前，图片必须加载完

没等图片加载就调 masonry()，JS 读到的高度全是 0，结果就是卡片堆叠、定位错乱、offsetTop 报错。

• 必须引入 imagesLoaded，且初始化必须包在它的回调里
• 子项不能嵌套在 .col-* 内；宽度改用 CSS 控制，比如 width: calc(33.333% - 1rem)
• 响应式切换列数时，不能只改 CSS，必须手动调 masonry.layout()
• columnWidth 推荐用 ".grid-sizer"，再加个隐藏元素设对应宽度，比传数值更稳

真正麻烦的从来不是写几行 CSS 或引一个 JS 库，而是判断当前项目能不能接受「视觉近似」——如果内容高度差异不大、用户滚动不快、且兼容性要求不高，column-count 就够用；一旦有懒加载、动态折叠、或需要点击后精准定位，Masonry 或 Isotope 就绕不开。