嵌套 .col 出现空白是因外层 .col 的 padding 与内层 .row 的 margin 未完全抵消，bootstrap 5 需在嵌套 .row 上加 mx-n3；列竖排是因缺少 .row 容器导致 flex 失效；总宽超 12 会自动换行；form 标签插入 .row 中会破坏直接子元素关系。
为什么嵌套的 .col 之间多了一圈空白
根本不是 CSS 写错了，而是外层 .col 的 padding: 0 15px 和内层 .row 的 margin: 0 -15px 没抵消干净。外层列自带左右内边距，子 .row 要“吸边”就得额外加负外边距，否则视觉上就撑开一圈白边。
- Bootstrap 5 必须用
mx-n3（对应margin: 0 -1rem），不是mx-n2或手写margin: 0 -15px - 这个类必须加在嵌套的
.row上，不是父.col，也不是最外层.row - 如果用了 Bootstrap 4，才用
mx-n2；混用版本会导致负边距值错位
嵌套后列不换行、宽度全变成 100%
典型症状：写了两个 .col-6，结果竖着堆成一列，而不是横排。这说明 Flex 布局根本没生效——.row 没被识别为 flex 容器，原因几乎一定是子 .col 没包在 .row 里。
- 检查 DOM 结构：
<div class="col-8"><div class="col-6">A</div></div>是错的；必须是<div class="col-8"><div class="row"><div class="col-6">A</div></div></div> -
.row是唯一能激活 Flex 行为的容器，跳过它，.col-*就退化为普通块级元素 - 浏览器 DevTools 里看 computed 样式，确认
display: flex是否出现在你期望的.row上
嵌套列总宽超 12 导致意外换行
Bootstrap 不校验总和，只按规则渲染：同一 .row 内所有 .col-* 数字加起来超过 12，第二列起就会自动 wrap 到下一行。这不是 bug，是设计行为。
-
.col-8 .col-8→ 总和 16 → 第二个.col-8掉到下一行，视觉上变成两行单列 - 想强制不换行？加
flex-nowrap类，但得自己处理溢出或滚动，响应式场景下容易出问题 - 更稳妥的做法是改用
.col+flex-fill，让列均分剩余空间，绕过栅格数字限制
form 标签破坏嵌套结构导致错位
常见但隐蔽的问题：把 <form></form> 放在 .row 里、包裹多个 .col-*，结果列全塌了。因为 .row 只对直接子元素应用 Flex 样式，<form></form> 插进来，.col-* 就变成孙节点，样式失效。
- 正确做法：每个
.col-*内部单独包一个<form></form>，确保.col-*始终是.row的直接子元素 - 别在
.row外再套自定义 div 并加 padding/margin，会干扰负边距逻辑 - 用 Chrome 的 Layout 面板看盒模型，重点核对
width、flex-basis和margin是否如预期抵消
.row 都得独立承担负边距修复责任」——外层修好了，内层不加 mx-n3，照样白边；内层修好了，父 .col 宽度又不够塞下两个 .col-6，照样换行。它不是一次配置就能全局生效的系统，而是一层层手动对齐的盒模型工程。
