column-count在Bootstrap中易错位，因.row/.col依赖Flex/Grid/float破坏文档流，而多列布局要求纯块级流式容器；须改用独立容器（如.masonry-container），子项设display:block、break-inside:avoid，并用媒体查询响应式控制列数。
为什么 column-count 在 Bootstrap 里容易“错位”
直接给 .row 或容器加 column-count 后，子项（比如 .col）常出现高度塌陷、断行异常、响应式失效——根本原因是 Bootstrap 的 col 类自带 float 或 flex 布局逻辑，与 CSS 多列布局（columns）的渲染机制冲突。多列布局要求子元素是纯块级流内容，不能带强定位或弹性约束。
正确做法：绕开 .col，用语义化容器 + 重置样式
放弃在 .row 上套 column-count，改用干净的包裹容器，并手动清除 Bootstrap 默认干扰：
- 用
<div class="masonry-container">替代<div class="row"> - 子项用普通
<div>，不加任何col-*类 - 必须重置子项的
margin、display和break-inside，否则列间会出现空白断裂
.masonry-container {
column-count: 3;
column-gap: 1.5rem;
}
.masonry-container > div {
break-inside: avoid;
margin-bottom: 1.5rem;
display: block;
}
@media (max-width: 768px) {
.masonry-container { column-count: 1; }
}
@media (min-width: 769px) and (max-width: 992px) {
.masonry-container { column-count: 2; }
}
遇到图片高度抖动？必须显式设置 img 宽高或 object-fit
瀑布流最常见视觉错乱来自图片异步加载导致列高重排。浏览器按文本流计算列高，图片没加载完时高度为 0，加载后突然撑开，触发列内容重新分配——看起来像“跳闪”或“错列”。
- 给
img加width和height属性（HTML 属性，非 CSS），让浏览器预留空间 - 或统一用
aspect-ratio+object-fit: cover控制缩放行为 - 避免用
background-image实现图示，它无法触发break-inside: avoid防断行
IE 不支持？别硬扛，用 @supports 优雅降级
Bootstrap 5+ 已放弃 IE，但 column-count 在 IE10+ 虽支持，却存在 break-inside 兼容性差、列间隙不可控等问题。真实项目中更稳妥的做法是检测支持度后切换布局：
立即学习“前端免费学习笔记（深入）”；
@supports (column-count: 3) and (break-inside: avoid) {
.masonry-container {
column-count: 3;
}
}
@supports not (column-count: 3) {
.masonry-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
注意：CSS Grid 方案需确保子项不设固定高度，否则会破坏瀑布流动态高度特性；真正复杂的瀑布流交互（如无限滚动、拖拽排序），还是得上 Masonry 或 Isotope 这类 JS 库——column-count 只适合静态、内容高度差异不大、且不需要点击重排的场景。
