React项目中如何移除Bootstrap row/col的默认边距

当然可以做到，不用给每个row/col手动加类，直接通过全局CSS覆盖Bootstrap的默认样式就行，具体操作如下：

原理说明 #

Bootstrap 5的row默认带负左右margin，col默认带左右padding，这俩组合起来就是你看到的默认间距。我们只需要覆盖这两个核心样式即可。

全局移除的方法 #

1. 在你的React项目里新建一个自定义CSS文件，比如custom-bootstrap-reset.css
2. 在文件里添加以下样式：

/* 清除row的负margin */
.row {
  margin-left: 0;
  margin-right: 0;
}

/* 清除所有col类的左右padding */
.col, [class^="col-"], [class*=" col-"] {
  padding-left: 0;
  padding-right: 0;
}

3. 关键：在index.tsx里先导入Bootstrap的CSS，再导入这个自定义文件，确保自定义样式优先级更高：

import 'bootstrap/dist/css/bootstrap.css';
import './custom-bootstrap-reset.css'; // 必须放在Bootstrap CSS之后

可选：局部移除间距 #

如果你不想全局移除，只想给特定区域的row/col清除间距，可以给父容器加个标识类，比如no-gutter-section，然后写精准的选择器：

.no-gutter-section .row {
  margin-left: 0;
  margin-right: 0;
}

.no-gutter-section .col,
.no-gutter-section [class^="col-"],
.no-gutter-section [class*=" col-"] {
  padding-left: 0;
  padding-right: 0;
}

之后只要把需要清除间距的区域放在带no-gutter-section类的容器里就行，不用改每个row/col。

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