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></p>），否则单个词撑破列宽
用 CSS column-count 做真·多列文本流
如果目标是像报纸那样文字自动跨栏、断行、平衡列高（而非栅格里塞 5 个独立区块），就得绕过栅格，直接用原生 CSS 多列：
- 给文本容器（如
<div class="text-columns">）加样式：<code>column-count: 5; column-gap: 1.5rem; - 必须设
height或max-height才能触发分栏；纯min-height不生效 - 不兼容
<table>、<code><pre class="brush:php;toolbar:false;"></pre>等块级替换元素，它们会整块落入第一栏 - 无法用 Bootstrap 断点类控制响应式列数（如“小屏 2 栏、大屏 5 栏”），得手写
@media规则 -
row-cols-5：适合“5 个独立内容块并排”，每个块可含标题、图片、按钮；等高、响应式断点天然支持（如row-cols-md-3）；但不是连续文本流 -
column-count：适合“一段长文本自动分 5 栏”，阅读流连续，列间自动平衡高度；但无法嵌入复杂组件，响应式需手动写媒体查询 - 性能上，
column-count在 Safari 中偶有重排卡顿；row-cols-5是标准 Flex，无兼容性风险
row-cols-5 和 column-count 的关键差异
选哪种，取决于你到底要什么：
最容易被忽略的是：用 row-cols-5 时，如果某列内容极少（比如只有几个字），它仍占 20% 宽度——这不是 bug，是 flex 均分的必然结果；若需“内容自适应宽度”，就得放弃栅格，改用 display: inline-block 或 CSS Grid 的 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。
