直接写style="width: 20%"会破坏bootstrap栅格，因其覆盖flex-basis却未禁用flex-grow/shrink，导致小屏不堆叠、多列总宽超100%换行、混用时计算错乱；安全添加.col-md-5ths须同时满足flex: 0 0 auto、width/max-width: 20%和min-width: 0。
为什么直接写 style="width: 20%" 会破坏 Bootstrap 栅格
因为 Bootstrap 5 的 .col 类本质是 Flex 项目，依赖 flex-basis 和 max-width 配合 .row 的 display: flex 生效；硬加内联 width 会覆盖 flex-basis，但无法禁用 flex-grow/flex-shrink，导致：
- 小屏下本该堆叠成一列，却仍强行占 20% 宽度，内容被压缩或溢出
- 多列并存时总宽 ≠ 100%，触发 Flex 换行（比如 5 个
col-3实际是 5×25% = 125%，第五个掉第二行） - 与其他
.col-*n混用时宽度模型冲突，浏览器计算错乱
怎样安全添加 .col-md-5ths 这类自定义百分比列类
核心是复用 Bootstrap 的 Flex 基础逻辑，不干扰原有断点和响应式行为。关键三点必须同时满足：
-
flex: 0 0 auto—— 禁用伸缩，让width和max-width真正生效 -
width: 20%+max-width: 20%—— 明确锁定宽度，避免 Flex 自动分配干扰 -
min-width: 0—— 防止长单词、URL 或未换行文本撑破容器（极易被忽略）
示例 CSS：
.col-md-5ths {
flex: 0 0 auto;
width: 20%;
max-width: 20%;
min-width: 0;
}
@media (min-width: 768px) {
.col-md-5ths {
flex: 0 0 auto;
width: 20%;
max-width: 20%;
}
}
row-cols-5 能不能代替五等分列宽
不能。它只是控制「每行最多显示几个 .col 子项」，不改变单个 .col 的宽度计算逻辑：
- 5 个纯
.col（无-n后缀）在.row中会均分容器宽度，看似五等分，但这是flex: 1的副作用，不是可控的列宽系统 - 一旦混入
.col-6，该列按 12 列体系占 50%，其余 4 个.col平分剩下 50%，布局立刻失衡 -
row-cols-auto更危险：列宽完全由内容决定，无法保证等宽或对齐
表格里用 .col-*n 设置列宽为什么常失效
表格单元格（<th>/<code><td>）默认不是 Flex 项目，<code>.col-*n 的样式规则（依赖 .row > .col）根本不会匹配到它们：
- 即使加了
class="col-4"，浏览器也找不到对应生效的 CSS 选择器 - 真正起作用的是
table-layout: fixed+width+word-break: break-all组合 - 若坚持用栅格语义，应把表格整个包进
<div class="row"><div class="col-12"><table>...</table></div></div>，再通过外层控制整体宽度
复杂点在于：自定义列宽类要兼顾 Flex 行为、断点继承、内容防溢出三者，漏掉任意一个，都会在某个屏幕尺寸或数据内容下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
