Bootstrap 5 不支持 .col-md-5 是因栅格基于12列硬编码，5非12因数；需自定义 .col-md-5ths 类并设 flex: 0 0 auto、重置 margin-left，或改用 CSS Grid 实现五等分。
为什么 .col-md-5 不生效
Bootstrap 5 的预定义类（如 .col-md-4、.col-lg-6）全部基于 12 列体系硬编码生成，CSS 文件里根本不存在 .col-md-5 这个选择器。浏览器看到它就当没这回事——不是 bug，是设计使然。12 的因数（1、2、3、4、6、12）能覆盖绝大多数等分需求，但 5 不在其中。
手动加 .col-md-5ths 类最稳妥
新增一组自定义 class，不干扰原有栅格逻辑，兼容 Bootstrap 4/5：
-
.col-md-5ths必须声明flex: 0 0 auto，否则在.row（Flex 容器）中width可能被忽略 - 要重置首列的
margin-left，否则默认 gutter 会让整体左偏 - 响应式断点需分别写媒体查询，例如
.col-sm-5ths、.col-lg-5ths各自对应不同min-width - 如果要用 offset，得额外定义
.col-md-offset-20这类类名，值按百分比算（1 列 = 20%）
row-cols-5 不能替代五列系统
这个类只是控制「每行最多显示几个 .col 子项」，不改变单个 .col 的宽度计算逻辑：
- 搭配 5 个
.col看似等宽，纯属巧合：因为.col默认flex: 1，5 个均分容器宽度 - 一旦混用
.col-6和.col，布局立刻错乱——.col-6按 12 列体系占 50%，而.col是自动均分，二者宽度模型不兼容 -
row-cols-auto更不可控：列宽完全由内容撑开，无法保证等宽
更干净的解法：直接上 CSS Grid
如果你项目支持 Chrome 66+、Firefox 63+、Safari 16.4+（截至 2026 年已全覆盖主流环境），推荐跳过 Bootstrap 栅格，用原生 Grid：
.my-5-col-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
无需改 Bootstrap 源码，不污染全局 class 命名空间，也不依赖任何预设列数。唯一要注意的是：Grid 容器内子元素不再受 .row/.col 行为影响，得统一用 Grid 控制布局流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
