column-count 在 Bootstrap 中失效是因为其栅格依赖 Flex/Grid/float，而 column-count 要求纯块级流式容器；须绕开 .row/.col，在独立内容容器（如 .article-content）上设置 column-count、column-gap 等属性，并避免 overflow: hidden、transform、break-inside: avoid 及交互元素干扰。
column-count 在 Bootstrap 容器里为什么没效果
直接给 .row 或 .col 加 column-count: 3 基本无效——因为 Bootstrap 的栅格系统依赖 float、flex 或 grid 布局，而 column-count 要求元素是“块级流式内容”，不能有子元素主动脱离文档流。
常见错误现象：column-count 设了但内容还是单列堆叠，或者列之间高度严重不均、文字被截断。
- 必须作用在纯内容容器上（比如
<div class="content">），且该容器不能是.row或任何启用display: flex/display: grid的 Bootstrap 类 - 父级不能有
overflow: hidden或transform，否则会创建新的层叠上下文，切断分栏渲染 - 内部不能有
break-inside: avoid的块（如<h2>、<blockquote>），否则整块会被挤到下一列顶部
怎么让 Bootstrap 页面安全启用多列布局
核心思路：绕开栅格，用独立的语义容器承接分栏逻辑。不是改 .col-6，而是把多列内容塞进一个“内容区”里。
- 在
.container或.row内部新建一个<div class="article-content">，专门放长文本、列表等可分栏内容 - 给这个
div设置column-count、column-gap和column-rule，例如：.article-content { column-count: 3; column-gap: 1.5rem; column-rule: 1px solid #e9ecef; } - 确保该
div的width足够（比如100%），且没有max-width限制过死（Bootstrap 的.container默认有max-width，但它是合理的，不用动）
column-count 和 Bootstrap Flex/Grid 共存时的兼容性问题
如果页面既有 .row + .col 的卡片布局，又想对其中某张卡片里的正文做分栏，就得注意层级和渲染优先级。
立即学习“前端免费学习笔记（深入）”；
-
column-count不会改变子元素的盒模型，所以.col里的margin、padding仍生效，但列间间距只由column-gap控制，和 Bootstrap 的g-3等无关 - 在 Flex 容器（如
.d-flex）内部直接用column-count会失效——Flex 会强制子项按主轴排列，覆盖分栏行为 - 移动端要注意：小屏下
column-count: 3会导致每列太窄，文字频繁换行，建议用媒体查询降为column-count: 1或2
替代方案：什么时候不该硬用 column-count
当内容含大量交互组件（按钮、表单、折叠面板）或需要精确控制每列结构时，column-count 就不合适了——它只适合静态、流式、以阅读为主的文本块。
- 如果要让三张卡片横向平铺且响应式堆叠，用
.row .col-md-4；别试图用column-count模拟 - 如果内容里有
<table>、<pre>或高度固定的<img>，它们大概率会破坏分栏流，出现空白列或溢出 - IE11 及更早版本不支持
column-count（需前缀-webkit-column-count，但 IE 完全不认），若需兼容，得回退到 JS 分栏库或服务端拆分
分栏真正起效的前提，是内容足够“顺从”——没有强定位、无固定高、不主动打断流。一两个 position: relative 就可能让整列错位，这点容易被忽略。
