Bootstrap嵌套列出现空白是因外层.col的padding与内层.row的margin抵消不净，需在嵌套.row上加mx-n3（BS5）或mx-n2（BS4）负边距类解决。
为什么Bootstrap嵌套列之间多了一圈空白
因为 .row 默认有 margin-left: -15px 和 margin-right: -15px，而子级 .row 又被套在 .col-* 里——后者自带 padding-left: 15px 和 padding-right: 15px。两层 padding + margin 抵消不干净，视觉上就“撑开”了。
这不是 bug，是 Bootstrap 为外层容器设计的栅格对齐逻辑，但嵌套时它没考虑内层也需要“吸边”。
直接给嵌套 row 加 mx-n3 就行
Bootstrap 5 自带负边距工具类，比手写 CSS 更可靠、更兼容。
-
mx-n3对应margin-left: -1rem+margin-right: -1rem（Bootstrap 5 默认 1rem = 16px） - 必须加在嵌套的
.row上，不是父.col - 如果用的是 Bootstrap 4，对应类是
mx-n2（因为$spacer: 1rem但$spacer * .5 = .5rem，n2才是 -15px） - 别用
ml-n3 mr-n3—— 响应式断点下可能漏掉某一边
<div class="col-8">
<div class="row mx-n3"> <!-- 关键：这里加 mx-n3 -->
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>
</div>
遇到 flex 布局错位或换行异常怎么办
负边距本身不会破坏 flex，但若父 .col 宽度不够（比如 col-4 里塞两个 col-6），再加 mx-n3 会让子项实际宽度超限，触发 flex 换行或溢出。
- 先确认嵌套列总和 ≤ 12，例如
col-6 col-6合理，col-8 col-8就不行 - 检查父
.col是否被其他样式限制了max-width或设置了overflow: hidden - Chrome DevTools 里看 computed 样式，重点核对
width、flex-basis和margin是否如预期抵消 - 如果必须突破 12 栅格，改用
col（无固定宽度）+flex-fill更稳妥
自定义负边距值时要注意单位一致性
手动写 margin: 0 -15px 看似简单，但容易和 Bootstrap 的 rem 基准冲突，尤其开启响应式字体或用了 root 动态缩放时。
- Bootstrap 5 默认用
rem，所有间距工具类都基于$spacersmap 生成 - 硬写
px值会绕过响应式断点逻辑（比如mx-n3在sm断点下自动失效，但margin: 0 -15px永远生效） - 真要覆盖，用 Sass 重定义
$spacers，而不是零散加 style 属性 - 调试时优先用浏览器自带的“layout”面板看盒模型，别只信元素上写的 class 名
嵌套列间距问题本质是盒模型叠加的副作用，不是样式没生效，而是生效得太“实诚”了——你得告诉它：这里边界该收一收。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
