Bootstrap 5 实现多列文本排版的方法 Bootstrap 文本多列优缺点

Bootstrap 5 不支持 col-5 类实现五栏文本，因栅格基于12列且无20%对应类；推荐用 row-cols-5 实现等宽分栏，或用 CSS column-count 实现自动分栏文本流。

Bootstrap 5 本身不提供 CSS column-count 类（如 col-5 文本分栏），也不支持原生多列文本流（multi-column layout）；所谓“多列文本排版”，实际是用栅格系统模拟视觉分栏，或手动启用 CSS 多列属性——二者目的相似，但机制、行为和坑完全不同。

为什么不能直接用 col-5 实现五栏文本

Bootstrap 5 的 col 类基于 12 列栅格，所有预设宽度（col-1～col-12）都是 12 的因数换算值：col-2 ≈ 16.67%，col-3 = 25%。而 5 栏需每栏严格 20%，没有对应类。强行写 col-2 放 5 个，总宽仅约 83.3%，留白严重；写 col-3 则超宽 125%，第五个 col 必掉行——这不是 bug，是栅格设计逻辑决定的。

• row-cols-5 是唯一推荐的语义解法：它作用于 .row，强制子 .col 等宽均分（各 20%），且自动处理 flex 主轴对齐
• 别在 .col 上再加 float 或 display: inline-block —— BS5 的 .row 默认已是 display: flex，加这些会破坏 flex 流
• 若内容含长单词或 URL，需额外加 word-break: break-word 到文本容器（如 <p>），否则单个词撑破列宽

用 CSS column-count 做真·多列文本流

如果目标是像报纸那样文字自动跨栏、断行、平衡列高（而非栅格里塞 5 个独立区块），就得绕过栅格，直接用原生 CSS 多列：

• 给文本容器（如 <div class="text-columns">）加样式：column-count: 5; column-gap: 1.5rem;
• 必须设 height 或 max-height 才能触发分栏；纯 min-height 不生效
• 不兼容 <table>、<pre> 等块级替换元素，它们会整块落入第一栏
• 无法用 Bootstrap 断点类控制响应式列数（如“小屏 2 栏、大屏 5 栏”），得手写 @media 规则

row-cols-5 和 column-count 的关键差异

选哪种，取决于你到底要什么：

• row-cols-5：适合“5 个独立内容块并排”，每个块可含标题、图片、按钮；等高、响应式断点天然支持（如 row-cols-md-3）；但不是连续文本流
• column-count：适合“一段长文本自动分 5 栏”，阅读流连续，列间自动平衡高度；但无法嵌入复杂组件，响应式需手动写媒体查询
• 性能上，column-count 在 Safari 中偶有重排卡顿；row-cols-5 是标准 Flex，无兼容性风险

最容易被忽略的是：用 row-cols-5 时，如果某列内容极少（比如只有几个字），它仍占 20% 宽度——这不是 bug，是 flex 均分的必然结果；若需“内容自适应宽度”，就得放弃栅格，改用 display: inline-block 或 CSS Grid 的 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。