bootstrap 5 中无法直接使用 col 类实现20%宽度，因默认栅格基于12等分；应采用 col-{bp}-auto 配合 flex: 0 0 20% 和 max-width: 20% 或自定义 css 类实现。
Bootstrap 5 中如何让 col 在特定断点下占 20% 宽度
Bootstrap 5 默认栅格系统只提供 col-1 到 col-12（即 1/12 到 12/12），没有原生的五分之一（20%）类。直接写 col-2.4 或类似写法会失效——CSS 不支持小数列数，类名也不存在。
用 col-{breakpoint}-auto + 自定义 CSS 是最稳妥的做法
想在比如 md 断点（≥768px）下让某列固定占 20%，推荐用 col-md-auto 配合内联或作用域 CSS 控制宽度，避免污染全局样式：
- 给元素加
col-md-auto（防止被默认栅格规则覆盖） - 用
style="flex: 0 0 20%"或单独 class 设置flex: 0 0 20%和max-width: 20% - 注意：仅设
width: 20%不够，因为 Bootstrap 的col是 flex 项目，必须控制flex-basis
示例：
<div class="row"> <br><div class="col-md-auto" style="flex: 0 0 20%; max-width: 20%">20% 宽</div> <br> </div>
自定义 SCSS 类（适合项目中多次复用）
如果你在用 Bootstrap 源码（SCSS 版），可以在自定义 SCSS 文件里扩展栅格类，比如加一个 col-md-2-5（命名随意，但需避开冲突）：
- 定义时用
@include make-col-ready()和@include make-col(20)（注意：Bootstrap 的make-col接收的是「份数」，不是百分比；要实现 20%，得绕过它，直接写 CSS） - 更简单做法：直接写
.col-md-20 {<br> flex: 0 0 20%;<br> max-width: 20%;<br>}<br>@media (min-width: 768px) {<br> .col-md-20 {<br> flex: 0 0 20%;<br> max-width: 20%;<br> }<br>} - 然后在 HTML 中用
col-md-20即可
别用 col-{breakpoint}-1 ×5 拼凑——它不等于 20% ×5
常见误解：用 5 个 col-md-1 并排，以为总宽就是 100%。实际会出问题：
-
col-md-1是 1/12 ≈ 8.333%，5 个加起来是 41.666%，不是 100% - 如果加
g-0去掉间隙，再手动调flex-basis，反而更麻烦 - 响应式行为会错乱：其他断点下这 5 列仍按 1/12 计算，不再是等宽 20%
真要五等分，优先考虑 row-cols-5（仅控制子项数量，不控制单个宽度），或直接用 display: grid 替代——Bootstrap 栅格不是万能解法。
关键点：20% 是精确比例，Bootstrap 默认栅格基于 12 等分，硬套会导致计算偏差；动手前先确认是否真的需要 Bootstrap 栅格参与——有时候一行 display: flex + flex: 0 0 20% 更干净、更可控。
