Bootstrap 4嵌套.row出现白边是因为.col的15px内边距未被.row的负外边距完全抵消，需为嵌套.row添加mx-n2类，并确保box-sizing: border-box全局生效且DOM结构符合.row→.col直系嵌套要求。
Bootstrap 4嵌套.row为什么左右多出白边
因为外层 .col 的 padding-left: 15px 和 padding-right: 15px 没被内层 .row 的负外边距完全抵消。Bootstrap 4 的 .row 默认是 margin-left: -15px、margin-right: -15px，但这个值只对直接父容器生效；当 .row 嵌在 .col 里时，它要“吸”到父 .col 的左右边缘，就得再额外吃掉那 15px 内边距——而默认没加。
常见错误现象：
- 嵌套的卡片之间出现一圈明显空白，尤其在 Chrome DevTools 的 Layout 面板里能看到
.col的 padding 没被“吃掉” - 右侧内容轻微溢出容器，滚动条意外出现
- 响应式切换断点时，白边忽大忽小，像有弹性
解决方法很简单：给嵌套的 .row 加 mx-n2（不是 mx-n3，那是 Bootstrap 5 的值）：
<div class="col-8">
<div class="row mx-n2">
<div class="col-4">Card 1</div>
<div class="col-4">Card 2</div>
<div class="col-4">Card 3</div>
</div>
</div>原因在于：mx-n2 对应 margin-left: -0.5rem 和 margin-right: -0.5rem，而 Bootstrap 4 的 $spacer 默认是 1rem，所以 0.5rem = 8px？不对——Bootstrap 4 实际编译后 mx-n2 是 -15px，刚好匹配其 $grid-gutter-width: 30px 的一半。别手写 margin: 0 -15px，类名才是语义化保障。
立即学习“前端免费学习笔记（深入）”；
为什么加了 mx-n2 还是偏移？检查 box-sizing 和祖先元素
.row 的负外边距失效，八成不是类没加对，而是盒模型被改过。Bootstrap 4 依赖所有元素使用 box-sizing: border-box，一旦某个祖先节点（比如自定义 wrapper、或重置 CSS 里漏掉了 * { box-sizing: border-box }）变成 content-box，margin 就可能被继承压缩或计算错位，导致抵消量“缩水”。
排查步骤：
- 在 DevTools 里选中嵌套的
.row，看Computed标签页下的margin-left是否真为-15px；如果不是，往上逐级检查父元素的box-sizing - 确认有没有全局 CSS 覆盖了
box-sizing，尤其注意是否漏写了html { box-sizing: border-box }和*::before, *::after { box-sizing: inherit } - 避免在
.col外再套一层自定义div并设padding——这会把原本该由.row吃掉的 15px 变成 30px，mx-n2就不够用了
别用 gx-0 ——Bootstrap 4 根本不支持这个类
看到文档里写 gx-0 就想抄过来用？停手。gx-* 是 Bootstrap 5+ 引入的 gutter 工具类，底层靠 CSS 变量驱动，Bootstrap 4 完全没有这套机制。你在 BS4 项目里写 <div class="row gx-0">，浏览器只会默默忽略它，.row 还是带 -15px 负边距，.col 也还是带 15px 内边距，白边照旧。
BS4 中真正安全的替代方案只有两个：
- 局部清零水平间距：用
mx-n2+ 手动给子.col加px-0（注意是px-0，不是py-0），但必须成对出现，否则破坏垂直 gutter - 全局调整：改 Sass 变量
$grid-gutter-width: 0后重新编译 CSS，适合新建项目，不适合已有样式库混用
千万别写 .row { margin: 0 !important } 或 .col { padding: 0 !important } ——这不是归零，是拆掉齿轮后强行拧动发条。
嵌套后列竖着排了？先确认 .row 是 flex 容器
写了两个 .col-6 却没横排，而是上下堆叠，说明 .row 没激活 Flex 布局。根本原因几乎总是：子 .col 没直接挂在 .row 下，中间插了别的标签（比如 <form>、<section> 或自定义 div）。
错误结构：
<div class="col-8">
<form>
<div class="col-6">A</div>
<div class="col-6">B</div>
</form>
</div>正确结构：
<div class="col-8">
<div class="row mx-n2">
<div class="col-6"><form>A</form></div>
<div class="col-6"><form>B</form></div>
</div>
</div>关键点：
-
.row必须是.col的直接子元素，且.col必须是.row的直接子元素 - 在 DevTools 里检查
.row的display计算值，必须是flex；如果不是，说明它被其他 CSS 覆盖了，或 DOM 结构断了链 - Bootstrap 4 不支持
gap，别指望用gap: 15px替代负边距逻辑
最易被忽略的细节：每一层嵌套的 .row 都得独立加 mx-n2。外层修好了，内层不加，白边照常；内层加了，父 .col 宽度又不够塞下两个 .col-6，照样换行。这不是配置问题，是栅格层级契约本身的要求。
