Bootstrap 5列间水平gutter间距不生效问题

问题根源 #

• 给.row元素错误添加了p-4内边距，破坏了gutter的底层布局逻辑。Bootstrap水平gutter的实现原理是：给列（.col）添加左右内边距生成列间距，同时给.row添加等值的左右负外边距，抵消首尾列的外侧内边距，保证整行内容和外部容器对齐。给row额外加内边距会直接打乱这个计算规则，导致水平间距错位。
• 把背景、圆角类直接写在了.col元素上。gx类生成的水平间距本质是col的左右内边距区域，直接给col加背景色会让这个区域被背景填满，视觉上完全看不到列之间的空隙，感知到的垂直方向间距正常，实际是列折行时的内容自带间距，并非gutter生效的效果。

修复步骤 #

1. 移除.row上的p-4类，如果需要给整个行区域加内边距，将内边距设置在row的父容器上，不要直接给row加内边距破坏布局规则。
2. 将所有写在.col上的视觉样式（背景、圆角、flex布局类）移到col内部的新增子容器上，让col只承担列宽布局的作用，col的padding区域会透出row的背景色，形成可见的列间距。

修复后完整代码 #

<div class="right-section w-100 h-auto container-fluid p-4">
  <div class="container summary">
    <h6 class="text-uppercase border-bottom border-1 fw-bold border-secondary pb-2 text-primary fs-6">Summary</h6>
    <div class="container">
      <!-- 移除row上的p-4 -->
      <div class="row gx-2 bg-danger">
        <div class="col">
          <!-- 视觉样式全部移到col内层 -->
          <div class="d-flex rounded bg-light align-items-center justify-content-between">
            <h5 class="h-full p-4 text-uppercase fs-6 text-white">Completed</h5>
            <span class="bg-warning p-4 rounded-end">06</span>
          </div>
        </div>
        <div class="col">
          <div class="d-flex rounded bg-light align-items-center justify-content-between">
            <h5 class="h-full p-4 text-uppercase fs-6 text-white">Pending</h5>
            <span class="bg-warning p-4 rounded-end">03</span>
          </div>
        </div>
        <div class="col">
          <div class="d-flex rounded bg-light align-items-center justify-content-between">
            <h5 class="h-full p-4 text-uppercase fs-6 text-white">Scheduled</h5>
            <span class="bg-warning p-4 rounded-end">03</span>
          </div>
        </div>
        <div class="col">
          <div class="d-flex rounded bg-light align-items-center justify-content-between">
            <h5 class="h-full p-4 text-uppercase fs-6 text-white">Postponed</h5>
            <span class="bg-warning p-4 rounded-end">03</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

通用避坑准则：Bootstrap中.row的核心作用是生成flex布局容器、通过负边距抵消列的外侧gutter，不要随意给row添加内边距；.col的核心作用是控制列宽，所有视觉样式尽量放在col的子元素上，能避免90%以上的gutter失效问题。

内容的提问来源于stack exchange，提问作者alittlecurryhot