使用bootstrap 4的嵌套栅格时，边距塌陷通常源于内层列未正确应用负外边距或父容器未处理水平填充。直接做法是确保内层行（.row）设置了 margin-left: -15px 和 margin-right: -15px，以抵消外层列的 padding。若需自定义间距，可结合 .no-gutters 类移除默认间隙，并手动控制子元素布局。
为什么嵌套行需要负外边距
Bootstrap 4 的栅格系统依赖 .container 的固定宽度和 .row 的负外边距来对齐列。当在 .col 内部再次放置 .row 时，内层行必须继承外层列的填充空间，否则会出现视觉错位。通过给内层行添加负 margin，可以将其内容拉回至与外层列边缘对齐的位置。
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- 外层列 -->
<div class="row">
<!-- 内层行：自动继承负 margin 逻辑 -->
<div class="col-md-6">内层左</div>
<div class="col-md-6">内层右</div>
</div>
</div>
</div>
</div>上述代码中，外层 .col-md-8 拥有左右各 15px 的 padding。内层 .row 默认带有 margin-left: -15px，从而使其子列 .col-md-6 的内容从左侧开始，正好填满外层列的可用宽度。预期结果是内层两列总宽度等于外层列宽度，无额外空白。
立即学习“前端免费学习笔记（深入）”；
如何移除嵌套栅格的默认间隙
若希望嵌套区域没有默认的 30px 总间隙（左右各 15px），可在内层 .row 上添加 .no-gutters 类。该类会移除行的负外边距以及列的内边距，使子元素紧密排列。适用于需要精确像素级控制的布局场景。
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row no-gutters">
<!-- 移除间隙后，子列紧贴排列 -->
<div class="col-md-6" style="border:1px solid red">紧左</div>
<div class="col-md-6" style="border:1px solid blue">紧右</div>
</div>
</div>
</div>
</div>在此示例中，.no-gutters 移除了 .row 的 margin 和 .col 的 padding。由于 .col-md-6 本身仍占 50% 宽度，两个子列将并排占据整个外层列宽度，且中间无间隙。预期结果为两列之间无缝连接，边框直接接触。
嵌套栅格中列宽计算是否受父级影响
Bootstrap 4 的列宽基于视口百分比，不受父级列宽度影响。内层 .col-md-6 始终占据其所在 .row 宽度的 50%，无论该 .row 位于哪个外层列中。因此，嵌套不会导致列宽比例失真，只需确保内层行的总列数不超过 12 即可维持正常布局。
