直接写 style="width: 20%" 会破坏响应式行为，覆盖 col-md-4 的 flex-basis 和 max-width，导致小屏不堆叠、gutter 错位；推荐用 row-cols-5 实现五等分，或自定义类时必须设 flex: 0 0 auto 和 min-width: 0。
直接写 style="width: 20%" 会破坏响应式行为
这不是“不推荐”，而是明确失效：它会覆盖 col-md-4 等类内部的 flex-basis 和 max-width，导致小屏下不堆叠、列间 gutter 错位、与其他列不对齐。浏览器开发者工具里能看到 flex-basis 被覆盖成 auto 或像素值，断点规则彻底失效。
用 row-cols-5 实现五等分（20%）最简单可靠
这是 Bootstrap 5 原生支持的方案，不依赖 12 列系统，也不需要写 CSS：
-
row-cols-5作用于.row，让所有直接子.col自动均分父容器宽度（各 ≈20%） - 它自带响应式断点：
row-cols-sm-5、row-cols-md-3等可单独控制不同尺寸下的列数 - 混用其他
col-*n类时不会干扰——因为row-cols-*n只影响子项数量，不改单个列的 flex 分配逻辑 - 注意：必须用
.col（无数字后缀），不是.col-2或.col-md-4
要写自定义百分比类，必须保留 min-width: 0
比如实现 .col-w-33（33.333%），不能只写 width: 33.333%：
- 必须同时设
flex: 0 0 auto，禁用伸缩，否则多列并存时会被拉伸或压缩 - 必须加
min-width: 0，否则长单词、URL 或未限制宽的图片会撑破容器 - 断点需手动补全：
.col-w-33-sm、.col-w-33-md各自对应媒体查询，不能只写一套 - 不要用
!important，它容易和第三方组件（如日期选择器弹层）的栅格样式冲突
col-md-4 的 33.333% 是精确值，但只对 .row 生效
这个百分比不是近似计算，而是 CSS 中硬编码的 flex: 0 0 33.333333%；但它生效的前提很具体：
- 父元素必须是
.row（且没被重置margin） -
.row必须嵌套在.container或.container-fluid内，否则宽度不受控 - 断点
md在 Bootstrap 4/5 中是 ≥768px，不是 ≥992px（旧文档常错） - 如果同行有
.col-auto或.col，col-md-4的宽度会受它们 flex 分配影响，不再是严格 33.333%
.row 是否干净、图片是否加了 max-width: 100%、长文本是否设置了 word-break: break-word，再动宽度逻辑。
