bootstrap 默认12列因依赖其因数关系（1、2、3、4、6、12）实现等分，.col-md-5无效；需自定义css类如.col-md-5ths设width:20%并重置margin；row-cols-5不改变列宽逻辑；推荐用css grid替代。
bootstrap 默认 12 列，为什么不能直接改成 5 列？
因为 Bootstrap 的预定义类（如 .col-md-4）是硬编码在 CSS 中的，它们依赖 12 的因数关系（1、2、3、4、6、12）来实现等分。你写 .col-md-5 不会生效——CSS 里根本没定义这个类，浏览器不认识。
这不是 bug，是设计取舍：12 列兼顾了灵活性与体积控制。想支持任意列数（比如 5、7、8），就得自己补样式，或者换思路。
手动覆盖 CSS 实现 5 列布局（兼容 Bootstrap 4/5）
最稳妥的做法是新增一组自定义 class，不破坏原有栅格逻辑。以中等屏（md）为例：
.col-md-5ths {
flex: 0 0 auto;
width: 20%;
}
.col-md-5ths:first-child {
margin-left: 0;
}
然后在 HTML 中使用：
<div class="row"> <div class="col-md-5ths">第1列</div> <div class="col-md-5ths">第2列</div> <div class="col-md-5ths">第3列</div> <div class="col-md-5ths">第4列</div> <div class="col-md-5ths">第5列</div> </div>
- 必须加
flex: 0 0 auto，否则width在 Flex 容器（.row）里可能被忽略 - 别忘了重置
margin-left，否则默认 gutter 会让首列错位 - 如果要用 offset/push/pull，得额外写
.col-md-offset-20这类 class，值按百分比算（如 1 列 = 20%，2 列 = 40%）
用 row-cols-* 能否绕过 12 列限制？
不能。虽然 row-cols-5 看起来像“设为 5 列”，但它只是控制「每行最多显示几个 .col 子项」，并不改变单个 .col 的宽度计算逻辑。它背后仍依赖默认的 12 列体系来分配空间。
-
row-cols-5+ 5 个.col→ 每列平均占 20%，看似达成 5 列，但这是巧合，不是可控的列宽系统 - 一旦混用
.col-6和.col，布局立刻错乱——因为.col-6是按 12 列体系算的 50%，而.col是 auto-fit，二者不兼容 -
row-cols-auto更危险：它完全放弃列宽控制，纯靠内容撑开，无法保证等宽
更现代的替代方案：用 CSS Grid 替代栅格类
如果你项目已支持较新浏览器（Chrome 66+、Firefox 63+、Safari 16.4+），直接用原生 grid 更干净：
<div class="my-5-col-grid"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> </div>
.my-5-col-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
- 无需改 Bootstrap 源码，也不污染全局 class 命名空间
- 响应式只需加媒体查询：
@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 和 Bootstrap 的
.row/.col混用时注意：别把grid容器套在.row里，否则 Flex + Grid 嵌套易出意外交互
offset、order、响应式断点组合）都得同步重写一遍，否则一上小屏就露馅。
