纯CSS的column-count在Bootstrap 5中无法直接用于.row，因其默认display: flex会静默屏蔽该属性；必须使用独立容器（如.masonry-container）、设display: block、子项加break-inside: avoid，并配合@media断点和@supports包裹规则才能生效。
纯 CSS 的 column-count 在 Bootstrap 5 中无法直接套在 .row 上生效——它会被 Flex 布局静默屏蔽，不是报错，是“看起来写了却没反应”。必须剥离栅格干扰，用干净容器 + 强制块级流 + 列内防断页，才能让瀑布流真正跑起来。
为什么直接给 .row 加 column-count 没用
Bootstrap 5 的 .row 默认是 display: flex，而 column-count 只在块级流（display: block）下工作。浏览器遇到冲突时不会报错，而是直接忽略 column-count，结果就是卡片堆成一列、列宽塌陷、响应式断点失效。
- 别在
.row上加column-count，哪怕你加了style="column-count: 3"也白搭 - 子项不能带任何
.col-*类——它们自带flex-basis和margin，会破坏多列流式计算 -
gap-4这类 Bootstrap 间距类对多列无效；必须用column-gap直接写在容器上
如何写出真正生效的瀑布流容器
核心是“干净容器 + 显式重置 + 防断页”。推荐用独立语义类名，避开所有 Bootstrap 栅格类干扰。
- 用
<div class="masonry-container">替代<div class="row">，并在该元素上加style="display: block;"强制退回到块级流 - 每个卡片子项用普通
<div class="card-item">，不套.col，也不嵌套在.card-body内部 - 子项必须设
break-inside: avoid（不是avoid-column），否则图片+标题组合大概率被切在两列中间 - 图片要加
img { max-width: 100%; height: auto; }，否则撑破列宽会导致break-inside失效
响应式列数切换怎么不闪屏
只靠 @media (min-width: 768px) { column-count: 2; } 不够——Bootstrap 断点和列数变化不同步，缩放窗口时会出现短暂单列或列宽跳变。
立即学习“前端免费学习笔记（深入）”；
- 必须显式匹配 Bootstrap 断点：用
@media (min-width: 576px)、(min-width: 768px)、(min-width: 992px)分别定义列数 - 每档断点里同时设
column-count和column-gap，例如：@media (min-width: 768px) { column-count: 2; column-gap: 1.5rem; } - 列宽控制不用
.col-md-4推算，改用.card-item { width: calc((100% / 3) - 1rem); }（N=列数，G=间隙） - 必须用
@supports (column-count: 3)包裹整套规则，并提供flex-wrapfallback，否则 Safari 15 及更早版本直接白屏
Firefox 稳、Chrome 旧版卡、iOS Safari 抽风怎么办
不同浏览器对多列布局的支持差异真实存在，不是配置问题，是渲染引擎行为不一致。
- Firefox 表现最稳，基本开箱即用；Chrome 旧版（如 90 以下）需额外加
column-fill: auto防初始错位 - iOS Safari 对
break-inside: avoid支持不稳定，可降级为break-inside: avoid-column（仅限 iOS） - 图片加载未完成时高度为 0，会导致列高计算错误、卡片错位——必须给
<img>加 HTMLwidth和height属性预留空间，或统一用aspect-ratio: 16/9+object-fit: cover - 别用
background-image做卡片图，它不参与break-inside计算，也无法响应式缩放
最常被忽略的一点：你写的 column-count 规则是否真的被浏览器执行了？打开 DevTools，在 Elements 面板里选中容器，看 Computed 栏里有没有生效的 column-count 值——如果没出现，说明它已被父级 Flex 或子项样式静默覆盖，得回去检查 display 和 .col 类是否彻底清干净了。
