Bootstrap5.1.3编译后.row子元素带margin-top:3rem问题咨询

这不是Bootstrap 5.1.3的默认正常行为。官方默认编译产出的.row > *规则中，margin-top默认值为0，不存在自带3rem上外边距的设定。

• 检查构建工具的SCSS编译配置：如果是用Webpack、Vite等工具构建，确认sass-loader/内置Sass编译模块的additionalData（或同功能的全局注入配置）没有提前注入覆盖Bootstrap默认变量的代码。如果提前将$grid-row-gap变量设为3rem，编译后就会给所有.row的直接子元素加上这个上外边距。
• 校验本地依赖完整性：检查node_modules/bootstrap/scss/mixins/_grid.scss文件内的make-col-ready混入逻辑，确认本地安装的Bootstrap包没有被意外篡改、或安装过程中文件损坏。可以删除node_modules目录和对应lock文件后重新执行npm install重装依赖验证。
• 溯源样式来源：打开浏览器开发者工具，选中触发该样式的元素，在样式面板中追踪margin-top: 3rem规则的具体来源，排查是否存在其他全局CSS（如第三方UI库样式、误引入的定制主题文件）覆盖了Bootstrap默认规则。
• 核对导入路径：确认SCSS文件中导入的是官方原版Bootstrap的入口文件，没有误导入其他第三方修改过的Bootstrap变种包。

如果暂时无法定位根因，可以在Bootstrap导入语句后添加重置规则覆盖异常样式：

@import '~bootstrap/scss/bootstrap.scss';

.row > * {
  margin-top: 0;
}

优先建议定位异常样式的产生源头，避免后续出现其他隐性样式冲突。

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