嵌套.row需加mx-n2类才能抵消外层.col的15px内边距，否则左右各多出15px白边；必须确保box-sizing: border-box全局生效，且避免额外wrapper干扰。
Bootstrap 4 的多层嵌套列不会真正“叠加” padding，但视觉上出现的过度留白，几乎全是 .row 的负外边距未抵消父级 .col 的内边距所致——核心问题在嵌套结构缺失类名或盒模型不一致。
为什么嵌套 .col 看起来左右空了一大截
外层 .col 默认带 padding-left: 15px 和 padding-right: 15px；内层 .row 默认有 margin-left: -15px 和 margin-right: -15px，但它只对“直接父容器”生效。当 .row 嵌在 .col 里时，这组负边距根本没去“吃掉”父 .col 的 15px 内边距，于是左右各多出 15px 白边。
- Chrome DevTools 的 Layout 面板里能看到
.col的 padding 没被任何 margin 抵消 - 右侧内容轻微溢出容器，滚动条意外出现
- 响应式切换时白边忽大忽小，像有弹性
给嵌套的 .row 加 mx-n2 才是正解
mx-n2 在 Bootstrap 4 中编译为 margin-left: -15px 和 margin-right: -15px，刚好匹配其 $grid-gutter-width: 30px 的一半，语义清晰且版本安全。
- 别手写
style="margin: 0 -15px"——类名才能随主题/断点扩展 - 错误写法：
<div class="col-8"><div class="row">...</div></div> - 正确写法：
<div class="col-8"><div class="row mx-n2">...</div></div> - 如果嵌套超过一层（比如
.col → .row → .col → .row），第二层.row也得加mx-n2
box-sizing: border-box 必须全局生效
一旦某层祖先元素（比如自定义 wrapper、或重置 CSS 漏掉了）变成 content-box，.row 的负 margin 就可能被压缩或计算错位，导致抵消量“缩水”。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 的 Computed 标签页，确认嵌套
.row的margin-left真为-15px - 确保有
html { box-sizing: border-box }和*::before, *::after { box-sizing: inherit } - 避免在
.col外再套一层自定义<div>并设padding——这会让需抵消的值从 15px 变成 30px，mx-n2就不够了
别用 .no-gutters 或 .g-0 来“修复”嵌套白边
.no-gutters 是 Bootstrap 4 的类，它只移除 .row 的负 margin 和 .col 的 padding，但会破坏栅格间隙逻辑；而 .g-0 是 Bootstrap 5 才引入的，BS4 不识别，写了也无效。
- 误用
.no-gutters会导致所有列紧贴，卡片之间无间隔，响应式错乱 -
.g-0在 BS4 中完全不生效，DevTools 里查不到对应样式 - 真正要的是精准抵消，不是粗暴清空
最容易被忽略的是嵌套层级中任意一个非标准 box-sizing 或额外 padding 的 wrapper ——它们不会报错，但会让 mx-n2 的效果打折扣，调试时得一层层看 computed 样式，而不是只盯着 HTML 结构。
