<p>Bootstrap 5 的 col 类基于 flex-basis + max-width 而非纯 width 百分比，仅在 .row 下生效；直接设 style="width" 会破坏响应式堆叠与多列均衡，应使用内置 col-* 类或添加 min-width: 0 的自定义 flex 类。</p>
Bootstrap 5 默认的 col 类怎么不按百分比生效？
因为 Bootstrap 5 的 col 类（如 col-6）本质是基于 flex-basis + max-width 的 flex 布局，不是纯百分比 width；它只在父容器为 .row 且子元素为 .col 时才触发预设断点逻辑。直接写 style="width: 33.33%;" 会破坏栅格的响应式行为，比如在小屏下仍强行占 1/3 宽度，不自动堆叠。
真正想改列宽百分比，得从两处入手：
- 用内置的
col-*-{n}类（n是 1–12），它们已对应固定百分比（如col-4≈ 33.333%） - 自定义 CSS 类覆盖
flex行为，但必须保留min-width: 0防止内容溢出破坏布局 - 避免直接改
width而忽略flex-grow/flex-shrink，否则多列并存时会出现拉伸/压缩异常
如何安全添加自定义百分比列类（如 col-w-33）？
Bootstrap 5 支持通过 Sass 变量或 CSS 自定义属性扩展栅格。最稳妥的方式是新增 class，复用其 flex 基础样式：
.col-w-33 {
flex: 0 0 auto;
width: 33.333333%;
max-width: 33.333333%;
min-width: 0; /* 关键：防止长文本撑破 */
}
<p>@media (min-width: 576px) {
.col-w-33-sm {
flex: 0 0 auto;
width: 33.333333%;
max-width: 33.333333%;
}
}注意：flex: 0 0 auto 禁用伸缩，让 width 和 max-width 生效；若漏掉 min-width: 0，遇到长单词或 URL 会撑破容器。
col 类和手动设 width 混用会怎样？
常见错误：给 <div class="col-6"> 再加 style="width: 25%;" —— 这会导致：
- CSS 优先级冲突：
style覆盖.col-6的flex-basis，但.row的display: flex仍在，造成列宽计算错乱 - 响应式失效：小屏下
.col-6应该变成 100%，但内联 width 强制锁定，列不会堆叠 - 与其他
col元素宽度不一致：比如col-6+col-6在 flex 下本该均分，混用 width 后可能总宽 ≠ 100%
真要动态控制，用 JS 切换预设类（如 el.classList.replace("col-6", "col-w-33")），别直接操作 style.width。
为什么 col-xxl-* 在某些设备上没效果？
col-xxl-* 仅在视口 ≥ 1400px 时生效，而很多“大屏”笔记本实际分辨率只有 1366px 或 1280px，根本达不到 xxl 断点。此时列会回落到上一个生效断点（如 col-xl-* 或默认的无断点 col-*）。
验证方法：打开浏览器开发者工具，手动拖动窗口宽度，看 computed 面板中 flex-basis 值是否变化；或者用 window.matchMedia("(min-width: 1400px)").matches 检查当前是否命中 xxl。
如果业务真需要更细粒度的百分比控制（比如 37.5%），建议放弃依赖断点类，直接写带媒体查询的自定义 class，或改用 CSS Grid 替代部分场景——Bootstrap 栅格本质是 flex 封装，不是为任意百分比设计的。
