如何不修改原有HTML让Bootstrap 5行间距与Bootstrap 4一致

完全可以，不需要改动任何现有HTML代码，只要在站点自定义的site.css中覆盖Bootstrap5的gutter相关默认规则，就能让栅格行间距、列间距表现和Bootstrap4几乎一致。

Bootstrap4与Bootstrap5栅格间距的核心差异只有三点：

• Bootstrap4默认列左右内边距为15px，相邻列总间距30px，.row自带左右-15px负边距抵消容器内边距，默认无垂直方向间距，移除间距使用.no-gutters类。
• Bootstrap5将间距抽为独立的gutter变量体系，默认水平gutter为1.5rem（即24px），比BS4窄6px；默认给行、列加了垂直gutter的计算逻辑，旧版.no-gutters类被替换为.g-0。
• Bootstrap5的容器内边距默认跟随gutter变量计算，只要修正gutter变量数值，容器内边距会自动对齐。

具体实现方法 #

1. 调整CSS引入顺序：必须先引入Bootstrap5核心CSS文件，再引入site.css，保证自定义规则优先级足够覆盖默认样式。
2. 将以下代码添加到site.css顶部即可：

/* 全局gutter变量对齐Bootstrap4默认30px列间距 */
:root {
  --bs-gutter-x: 1.875rem; /* 对应15px单侧列内边距，两列总间距30px */
  --bs-gutter-y: 0; /* 锁死默认垂直间距为0，和BS4表现一致 */
}

/* 重置.row默认规则，对齐BS4的负边距逻辑 */
.row {
  margin-top: 0; /* 移除BS5默认的上侧负边距计算 */
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

/* 重置列的默认边距、内边距规则 */
.row > * {
  margin-top: 0; /* 移除BS5默认给列加的上侧外边距 */
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/* 兼容BS4旧的.no-gutters类，无需修改原有HTML的类名 */
.no-gutters {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

注意事项 #

• 如果你之前的BS4项目自定义过非默认栅格间距，直接修改代码中--bs-gutter-x的数值即可，比如原项目用20px列间距，就将值改为1.25rem。
• 以上覆盖规则不会影响Bootstrap5原生gutter工具类（如g-2、gy-4）的正常使用，后续需要给特定模块加间距时，直接调用BS5原生类即可。
• 这套覆盖只调整间距相关逻辑，不会影响BS5其他组件、栅格布局的正常功能。

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