Bootstrap 5中bs-gutter-x导致.row类对应div边框溢出对齐异常问题

问题原因 #

主流前端框架（如Bootstrap）的.row类默认自带左右负margin，用于抵消外层.container容器的左右内边距，实现子列边缘对齐效果。如果没有按规范套外层container，或是需要单独禁用该元素的gutter，直接全局修改.row的默认属性会导致其他依赖默认gutter的页面出现异常。
你触发问题的代码如下：

<div class="row border-top border-bottom">
  <p id="body">
  </p>
</div>

问题效果截图：

可选用的修复方案 #

以下方案均为局部修改，不会影响全站其他页面的功能：

• 方案1：自定义专属类局部覆盖样式
  给当前出现问题的row新增一个自定义类，仅针对该类修改margin属性，不会影响全局.row的默认样式：
  修改后的HTML代码：

  <div class="row border-top border-bottom fix-row-overflow">
    <p id="body">
    </p>
  </div>
  

  新增CSS规则：

  .fix-row-overflow {
    margin-left: 0;
    margin-right: 0;
    /* 如需连带重置子元素的gutter内边距，可加下行规则 */
    --bs-gutter-x: 0;
  }
  

• 方案2：使用框架原生的局部gutter重置类
  如果你使用的是Bootstrap 4及以上版本，框架自带gx-0工具类，可直接重置当前元素的水平gutter，无需额外写CSS，也不会影响其他页面的.row元素：

  <div class="row border-top border-bottom gx-0">
    <p id="body">
    </p>
  </div>
  

• 方案3：补全规范的外层容器
  按照框架的设计规范，.row元素必须嵌套在.container或.container-fluid容器内，外层容器的内边距会刚好抵消.row的负margin，从根源避免溢出问题：

  <div class="container-fluid">
    <div class="row border-top border-bottom">
      <p id="body">
      </p>
    </div>
  </div>
  

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