怎样用CSS解决Bootstrap 4栅格嵌套导致的边距塌陷问题-css教程-PHP中文网

使用bootstrap 4的嵌套栅格时，边距塌陷通常源于内层列未正确应用负外边距或父容器未处理水平填充。直接做法是确保内层行（.row）设置了 margin-left: -15px 和 margin-right: -15px，以抵消外层列的 padding。若需自定义间距，可结合 .no-gutters 类移除默认间隙，并手动控制子元素布局。

怎样用CSS解决Bootstrap 4栅格嵌套导致的边距塌陷问题

为什么嵌套行需要负外边距

Bootstrap 4 的栅格系统依赖 .container 的固定宽度和 .row 的负外边距来对齐列。当在 .col 内部再次放置 .row 时，内层行必须继承外层列的填充空间，否则会出现视觉错位。通过给内层行添加负 margin，可以将其内容拉回至与外层列边缘对齐的位置。

怎样用CSS解决Bootstrap 4栅格嵌套导致的边距塌陷问题

<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 类。该类会移除行的负外边距以及列的内边距，使子元素紧密排列。适用于需要精确像素级控制的布局场景。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

怎样用CSS解决Bootstrap 4栅格嵌套导致的边距塌陷问题

<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% 宽度，两个子列将并排占据整个外层列宽度，且中间无间隙。预期结果为两列之间无缝连接，边框直接接触。