直接写 style="width: 20%" 会破坏 bootstrap 栅格响应式行为，导致小屏无法堆叠、gutter 错位、列宽失衡；应优先用自定义类如 .col-custom-20 或原生 flex+gap 实现。
直接写 style="width: 20%" 会破坏 Bootstrap 栅格的响应式行为
Bootstrap 的 .col-* 类（如 .col-md-4）本质是通过 flex-basis 和 max-width 控制列宽，并依赖父容器 .row 的负 margin 和子项的 padding 实现 gutters。手动加 style="width: 20%" 会强制覆盖 flex-basis，导致：
- 在小屏幕下无法自动堆叠（
col-sm-*等断点失效） - gutter（列间距）错位：因为 padding 仍存在，但 width 已被压缩，视觉上列变窄、间隙变大
- 与其他未加 style 的列无法对齐，破坏整行布局流
想实现 20% 宽度，优先用 Bootstrap 自定义 CSS 变量或 Sass 编译
Bootstrap 5+ 支持通过 $grid-columns 和 $grid-breakpoints 扩展列数，但 20% 对应 1/5，原生不支持 5 等分。更稳妥的做法是注入自定义类：
- 在你的 SCSS 文件中添加：
.col-xx-2 { flex: 0 0 auto; width: 20%; } - 配合响应式前缀（如
.col-md-xx-2）需额外定义媒体查询，或直接用@include media-breakpoint-up(md) - 如果只用 CSS 不用 Sass，可在
<style></style>块中写：.col-custom-20 { flex: 0 0 20%; max-width: 20%; }，再确保该类与.col同级使用（即不嵌套在.col-*内）
临时调试可用 !important，但上线前必须移除
开发时快速验证效果，可以写：
<div class="col" style="width: 20% !important;">...</div>，但要注意：
-
!important会压制所有响应式类的flex-basis，包括.col-lg-3在 lg 断点下的 25% - 移动端（
xs）下本该堆叠的列，仍强行保持 20% 宽度并横向溢出 - 后续维护者很难追溯宽度来源——CSS 检查器里看到的是内联样式，不是语义化类名
真正需要非标准比例时，考虑脱离栅格用 flex + gap
当 20% 是固定需求（比如仪表盘五宫格），Bootstrap 栅格反而成了负担。直接用原生 Flexbox 更轻量、可控：
- 父容器去掉
.row，改用：<div class="d-flex gap-3"></div>
- 子项不用
.col，直接：<div style="flex: 0 0 20%;">...</div>
- gap 替代 gutter，且支持响应式（
gap-md-4），兼容性在现代浏览器足够好（Chrome 84+/Firefox 63+）
这种写法绕过了 Bootstrap 的栅格计算逻辑，也避开了 class 冲突和断点干扰——但代价是你得自己处理小屏堆叠，比如加 @media (max-width: 768px) 把 flex-direction 改成 column。
