可用col-*类组合实现响应式不等宽布局，如col-12 col-md-3 col-lg-2与col-12 col-md-9 col-lg-10组合，使同一列在不同断点下呈现1:3→1:5的宽度比，且必须确保每行总和为12。
怎么用 col-* 类组合出不等宽列？
Bootstrap 栅格本身不提供“1/5 宽”“3.7 列”这种非整数占位，但你可以通过组合不同断点下的 col-* 类，让同一列在不同屏幕下呈现不同宽度——这本质就是响应式不等宽布局。比如左侧导航固定 20%，右侧主区占 80%，不是靠 width: 20% 硬写，而是用 col-md-2 col-md-10 这类组合实现。
-
col-类必须加总为 12（单行内），但每列可以不同：比如col-12 col-md-3 col-lg-2+col-12 col-md-9 col-lg-10就是典型的 1:3 → 1:5 不等宽分栏 - 不要试图用
col-md-2.4—— Bootstrap 没有小数列类，也不支持 - 如果需要「视觉上不等宽但语义上仍对齐」，优先考虑嵌套：外层
col-md-4放窄区，col-md-8放宽区；宽区内再起.row做子栅格，避免跨列错位
为什么不能直接给 .col-* 加自定义 width？
因为 .col-* 内部依赖 Flex 的 flex: 0 0 auto 和 max-width 计算，手动加 width 或 flex-basis 会覆盖 Bootstrap 的响应逻辑，导致断点失效、换行错乱、间距塌陷。
- 常见错误现象：
.col-md-6在平板上变成两行堆叠，或卡片突然缩成一条细线 - 典型干扰代码：
.card { width: calc(33.333% - 1rem); }—— 删除它，改用col-md-4+col-lg-3控制列数 - 真正需要微调时，用 Bootstrap 内置间距类（如
pe-3、ps-2）代替 margin/padding 手动偏移
遇到“列宽不准”“内容溢出”先查哪三件事？
90% 的不等宽异常不是栅格设计问题，而是结构或容器误用。
- 检查是否漏了
.row：所有.col-*必须直接子元素是.row，不能塞进.container或其他.col-*里就完事 - 检查是否混用了
.container-fluid和.container：两者 max-width 规则冲突，会导致同一样式在不同容器中计算出不同列宽 - 检查有没有未闭合的标签或多余空格：HTML 解析错误会让
.row失去 flex 上下文，.col-*退化为普通块级元素，宽度归零或撑满
移动端优先下，如何让小屏变等宽、大屏才不等宽？
这是最常用也最容易翻车的场景：你想要手机竖屏时单列堆叠（等宽），平板开始左右分栏（不等宽）。关键在于「不写最小断点类」，让小屏自然回退到 col-12。
- 正确写法：
col-12 col-md-3 col-xl-2（手机全宽 → 平板占 3/12 → 超大屏占 2/12） - 错误写法：
col-md-3 col-xl-2（手机无定义 → Bootstrap 默认按col-12渲染，看似没问题，但一旦加了其他样式干扰，就可能崩） - 兼容性影响：不写
col-前缀类，在 IE11 或旧版安卓 WebView 中可能完全不识别断点，建议始终显式声明col-12
不等宽的本质，是放弃「所有设备统一比例」的幻想，转而用断点组合表达「这里该窄一点」「那里该宽松些」的真实需求。别碰 flex-basis，别绕过 .row，更别用 calc 模拟列宽——Bootstrap 的列数系统不是限制，是约束条件下的自由。
