Bootstrap 原生不支持 col-1-5 类，因栅格系统基于12等分，无法精确实现20%宽度；row-cols-5 是最简方案，通过 Flex 自动均分且支持响应式断点，避免错位与换行。
col-1-5 类不存在，Bootstrap 原生不支持 1/5（20%）宽度的预设类。强行用 col-2（≈16.67%）或 col-3（25%）拼五列，必然错位或换行——这不是写法问题，是栅格设计逻辑决定的。
为什么 row-cols-5 是最简方案
row-cols-5 直接作用于 .row，让子 .col 自动均分容器宽度（各占 20%），不依赖列数总和为 12 的约束，也不需要手动计算百分比。
- 它基于 Flex 的
flex: 1行为，不是靠 12 列网格推算 - 响应式写法如
row-cols-2 row-cols-md-5：小屏 2 列、中屏起 5 列 - 如果内容过长导致换行，加
flex-shrink: 0或min-width: 0阻止压缩（尤其含长文本或图片时） - 注意：它只控制“每行最多几列”，不改变子元素内部的嵌套能力——
.col里仍可放心用col-md-6等
自定义 .col-1-5 类必须写对 flex 属性
单纯写 width: 20% 在 Flex 容器中会被拉伸或压缩，必须用 flex 三值语法锁定行为：
- 正确写法：
flex: 0 0 20%（不增长、不收缩、基准宽 20%） - 必须配
max-width: 20%，否则某些浏览器下 flex-grow 可能干扰 - 断点媒体查询要完整覆盖：从
xs到xxl，不能只写@media (min-width: 768px) - 别漏掉
box-sizing: border-box，否则 padding 会让实际宽度超 20%
用 col-* 组合实现「视觉上」1/5 宽度（仅限响应式场景）
如果你必须沿用传统栅格思维（比如老项目迁移），可用不同断点下的 col- 类制造“近似等宽”效果，但本质是妥协：
- 例如：左侧导航
col-12 col-md-2 col-lg-2+ 主区col-12 col-md-10 col-lg-10→ 中屏是 2:10（1:5），大屏也是 2:10 - 但这是“两栏不等宽”，不是“五栏等宽”；真要五栏，这种组合无法避免总和溢出或不足
- 常见翻车点：在
sm断点下没定义类，导致小屏堆成一列后，大屏又突然错位 - 这种写法适合布局结构变化大的场景（比如侧边栏显隐），不适合纯等分布局
移动端五列几乎不可用，得主动降级
20% 宽度在手机竖屏（375px）下只有约 75px，图标、文字、触摸目标全挤在一起。这不是 CSS 能解决的问题：
- 必须用响应式断点强制降级：如
row-cols-1 row-cols-sm-2 row-cols-md-5 - 避免在
xs下硬撑五列，哪怕加了overflow-x: auto滚动，体验也极差 - 如果业务强依赖小屏五列（比如工具图标栏），考虑用
scrollable-nav+whitespace-nowrap替代栅格
真正难的不是怎么写出 20%，而是判断什么时候不该用 20%。很多“五列需求”其实只是视觉错觉——用卡片间距、图标尺寸微调，比硬塞五列更可靠。
