Bootstrap 5 的 col 类无法直接实现 5 栏布局，因其栅格基于 12 列等分，而 100%÷5=20% 无对应预设类；强行使用 col-2 或 col-3 会导致总宽不足或溢出，引发错位或换行异常。
Bootstrap 5 的 col 类本身不支持直接写“五栏”或“七栏”这种非 12 整除的等宽布局，因为它的栅格系统基于 12 列等分；想实现多栏文本（比如 5 栏、7 栏），必须手动扩展类或用 CSS 覆盖，否则会错位、换行异常或宽度不准。
为什么 col-2 或 col-md-3 不能直接凑出 5 栏
Bootstrap 5 的 col- 类只提供 1–12 的整数倍宽度（如 col-2 = 16.666%，col-3 = 25%），而 100% ÷ 5 = 20%，没有预设类对应。强行用 col-2（≈16.67%）放 5 个，总宽只有约 83.3%，留白严重；用 col-3（25%）放 5 个则超宽（125%），触发自动换行——这就是常见“第五栏掉到第二行”的根源。
关键点在于：col 类的宽度是计算值，不是视觉等分指令；它依赖父 row 的 flex 布局和 12 列基准，不能靠“凑数”蒙混过关。
用自定义 CSS 实现真正 5 栏（推荐方案）
最稳定的做法是加一组轻量级自定义类，复用 Bootstrap 的断点逻辑，但把宽度设为精确 20%：
.col-1-5 {
flex: 0 0 auto;
width: 20%;
}
@media (min-width: 576px) {
.col-sm-1-5 { width: 20%; }
}
@media (min-width: 768px) {
.col-md-1-5 { width: 20%; }
}
@media (min-width: 992px) {
.col-lg-1-5 { width: 20%; }
}
使用时直接套在 div 上即可：
<div class="row"> <div class="col-1-5">栏 1</div> <div class="col-1-5">栏 2</div> <div class="col-1-5">栏 3</div> <div class="col-1-5">栏 4</div> <div class="col-1-5">栏 5</div> </div>
- 不要混用原生
col-*和自定义col-*-1-5在同一row里，flex 计算会冲突 - 小屏下若需降为 2 栏，可搭配
col-sm-6覆盖：<div class="col-1-5 col-sm-6"> - 避免给这些列设
padding或margin，改用 Bootstrap 的g-2、px-3等间距工具类统一控制
用 grid 替代 row/col 更灵活（适合纯文本多栏）
如果只是排版多栏文本（比如新闻摘要、术语列表），不用导航或表单交互，CSS Grid 比 Bootstrap 栅格更干净：
<div class="row-cols-5"> <div class="col">文本 1</div> <div class="col">文本 2</div> <div class="col">文本 3</div> <div class="col">文本 4</div> <div class="col">文本 5</div> </div>
然后加一行 CSS：
.row-cols-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
@media (max-width: 767.98px) {
.row-cols-5 {
grid-template-columns: repeat(2, 1fr);
}
}
优势是：不依赖 12 列约束、响应式切换更可控、文字换行不会因列宽突变而崩坏。但注意：这脱离了 Bootstrap 的栅格流，col 类的语义（如 col-md-4）在此无效。
真正麻烦的不是写 5 栏，而是让 5 栏在 iPad 横屏（768px）下不挤、在 iPhone SE（375px）下自动退化为单栏、且每栏内文字不溢出——这些细节全靠断点对齐和内容容器的 w-100 / text-wrap 控制，而不是靠多加一个 col 类就能解决。
