嵌套时列间空白源于外层.col的padding未被内层.row的负margin抵消，需显式添加mx-n3类（Bootstrap 5）或mx-n2（Bootstrap 4）以严丝合缝对齐。
嵌套时内边距丢失，不是 Bootstrap 忘了加 padding，而是你没给嵌套的 .row 补上负边距——它本该抵消父级 .col 的 padding，但漏掉这步，padding 就“露出来”了。
为什么嵌套后列之间多了一圈空白
外层 .col-8 自带 padding-left: 15px 和 padding-right: 15px，而内层 .row 默认也有 margin-left: -15px 和 margin-right: -15px。两者本该严丝合缝抵消，但如果你没显式加负边距类，抵消就残缺，视觉上就是列被“撑开”了一段空白。
- 这个空白只在嵌套时出现，平级
.row下不会 - 不是 CSS 没生效，是生效了但没对齐——盒模型叠加的结果
- Chrome DevTools 的 “Layout” 面板里能看到 padding 和 margin 实际值，比肉眼判断准得多
Bootstrap 5 怎么给嵌套 row 加负边距
直接用内置工具类，别手写 margin：
-
mx-n3：Bootstrap 5 默认对应margin-left: -1rem/margin-right: -1rem（即 -16px），刚好匹配$spacer: 1rem - 必须加在嵌套的
.row上，不是父.col，也不是子.col - 别用
ml-n3 mr-n3——响应式断点（如sm）下可能只减一边，导致左右不对称 - 如果项目还在用 Bootstrap 4，得换
mx-n2（因为它的$spacer * .5 = .5rem = 8px，而负边距需 -15px，n2才对得上）
嵌套 row 加了 mx-n3 还错位？检查这几件事
负边距本身不破坏布局，但会放大已有结构问题：
- 确认父
.col宽度够：比如.col-4里塞两个.col-6，再加mx-n3，实际宽度就超了，必然换行或溢出 - 检查子列总和 ≤ 12：
.col-6 .col-6合法，.col-8 .col-8就不行（16 > 12） - 看父
.col是否被其他样式限制：max-width、overflow: hidden或自定义padding都可能干扰 - 调试时关掉所有自定义 CSS，只留 Bootstrap 官方 CSS，确认是不是第三方样式覆盖了
mx-n3
想微调列内容呼吸感，别碰 row 的 margin
列间距（gap）和内容留白（padding）是两回事，混用容易失控：
- 用
g-3控制.row内相邻.col的间隙，干净无副作用 - 用
px-2、py-1等控制每个.col内部内容到边界的距离 - 千万别给
.col直接加padding后再嵌套.row——外层 padding 和内层mx-n3叠加，空白反而更难控 - 真要非标值（比如 6px），在
_custom.scss里扩展，加!important，命名用p-col-6这类语义化前缀，避开和系统p-*冲突
最常被忽略的一点：嵌套的 .row 不是装饰，是重置布局上下文的开关。漏掉一个，整层嵌套就脱离栅格约束——空白只是表象，底层是 flex 布局失效了。
