如何移除Bootstrap 5中row容器内部的多余空白间距

问题原因 #

• Bootstrap 5 已更新边距类的方向标识规则：原 Bootstrap 4 中使用的pr-*（右内边距）、mr-*（右外边距）类，在 Bootstrap 5 中对应改为pe-*（行尾方向内边距）、me-*（行尾方向外边距），你使用的旧版语法在 Bootstrap 5 环境中不会生效
• Bootstrap 栅格系统默认的列间距为沟槽（gutter），是通过给col元素设置左右内边距实现的，不是外边距，所以你调整margin属性自然没有效果
• 你代码中的子行列宽总和未占满12份栅格：第一个子行列宽总和为6+2+3=11，剩余1份宽度为空白；第二、第三个子行列宽总和为6+1+2=9，剩余3份宽度为空白，这部分空白属于栅格未占满导致的，和默认间距无关

解决方法 #

方法1：移除整行默认沟槽间距 #

如果需要让当前行所有列都没有默认间距，直接给row元素添加 Bootstrap 5 自带的g-0类即可，不需要单独给每个列设置样式：

<!-- 示例：给子行添加g-0清除默认沟槽 -->
<div class="row g-0 mt-3">
  <div class="col-md-6 bg-success">
    <!-- 列内容 -->
  </div>
  <div class="col-md-2 bg-warning">
    <!-- 列内容 -->
  </div>
  <div class="col-md-3 bg-primary">
    <!-- 列内容 -->
  </div>
</div>

方法2：单独调整单个列的间距 #

如果只需要移除某一列的右侧内边距，使用 Bootstrap 5 正确的语法pe-0即可：

<div class="col-md-3 bg-primary pe-0">
  <!-- 列内容 -->
</div>

方法3：解决栅格未占满的空白 #

如果需要列占满整行剩余空间，可二选一操作：

1. 调整列宽数值，让同一行的列宽总和等于12
2. 给最后一列添加flex-grow-1类，让它自动填充剩余空白宽度：

<div class="col-md-3 bg-primary pe-0 flex-grow-1">
  <!-- 列内容 -->
</div>

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