bootstrap 5 原生不支持 col-5 类，因其栅格基于12等分，5非因数；推荐用 row-cols-5 实现五等分，或自定义 flex: 0 0 20% 类并处理断点、gutters 和溢出。
Bootstrap 5 原生不支持 col-5 类，别硬套命名规则
Bootstrap 5 的栅格系统默认按 12 等分设计，所有内置列类（如 col-3、col-4）都基于 12 的因数。5 不是 12 的因数，所以没有 col-5 或 col-md-5 这种“五等分”原生类——强行写 col-5 会被忽略，页面照样单列堆叠或错位。
真正能用的方案只有两个：一是用 Flex 自动均分（推荐），二是手动加自定义 CSS（兼容旧项目）。
- 用
.col配合.row-cols-5是最轻量、语义最正的解法 - 手写
width: 20%要自己处理gutter（内边距/外边距）、断点和 Flex 主轴对齐，容易漏掉min-width: 0导致换行异常 - 别在
.col上再加float或display: inline-block—— Bootstrap 5 已彻底转向 Flex，这些会破坏布局流
row-cols-5 是最省心的五等分布局方式
这个类直接作用于 .row，告诉它“不管里面几个 .col，每行强制塞 5 个”，且自动等宽（每个占 20%）。它不依赖子元素数量，哪怕你只放 3 个 .col，它们也还是均分宽度，只是后面留空。
示例：
<div class="row row-cols-5"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> <div class="col">D</div> <div class="col">E</div> </div>
- 响应式可用：比如
row-cols-md-5 row-cols-2表示桌面端 5 列、手机端 2 列 - 它不影响子
.col内部的嵌套行为，内部仍可正常使用.col-md-6等类 - 注意：如果子元素内容过长或含图片，可能触发换行——此时需加
flex-shrink: 0或min-width: 0控制溢出
自定义 col-1-5 类要小心断点与 gutters
如果你必须沿用类似 Bootstrap 3/4 的自定义类名（比如为了迁移老项目），可以这样写：
<style>
.col-1-5 {
flex: 0 0 20%;
max-width: 20%;
}
@media (min-width: 576px) { .col-sm-1-5 { flex: 0 0 20%; max-width: 20%; } }
@media (min-width: 768px) { .col-md-1-5 { flex: 0 0 20%; max-width: 20%; } }
/* 其他断点依此类推 */
</style>
- 务必用
flex: 0 0 20%而不是单纯width: 20%，否则在 Flex 容器中可能被压缩或拉伸 - Bootstrap 默认 gutter 是通过
padding-left/right实现的，自定义类要显式继承或重置，否则列之间会贴死 - 别忘了加
box-sizing: border-box，否则 padding 会让实际宽度超 20%
移动端优先下，五列在小屏必然拥挤，得主动降级
5 列在手机屏（xs）上几乎不可读——图标挤、文字叠、触摸目标太小。这不是代码问题，是交互常识。
- 别指望“五列始终存在”，正确做法是用响应式断点降级：比如
row-cols-1 row-cols-sm-2 row-cols-md-5 - 如果业务强要求小屏也五列（比如数据看板），请同步启用横向滚动：
overflow-x: auto+white-space: nowrap，并确保容器有固定高度 - 测试时真机打开，别只看 Chrome DevTools 的模拟尺寸——iOS Safari 对 flex 换行的处理和 Chrome 有细微差异
Bootstrap 5 的五等分本质是「Flex 均分」问题，不是「怎么凑出 5」的问题。最容易被忽略的是：它默认不处理内容溢出，也不自动适配小屏密度——这两点得靠你主动加约束，而不是等框架兜底。
