直接修改 .row 的 margin 会失效，因为 Bootstrap 5+ 的栅格依赖「负 margin + 正 padding」配对机制；单独重置 margin 而不调整 .col 的 padding 会导致布局塌陷。
为什么直接改 .row 的 margin 会失效
Bootstrap 5+ 的 .row 默认带 margin-right: -0.5rem 和 margin-left: -0.5rem，这是为了抵消子元素 .col 的 padding，让内容真正贴边。但很多人一上来就写 .row { margin: 0; }，结果发现栅格塌了——列之间没间距了，甚至换行错乱。
根本原因是：Bootstrap 的栅格逻辑依赖这套「负 margin + 正 padding」配对。砍掉负 margin 却不调整 padding，.col 的左右内边距就会外溢，破坏流式布局。
实操建议：
- 别单独重置
.row的margin，要同步控制.col的padding - 优先用 Bootstrap 自带的间距工具类（如
gx-0、gy-3）微调，比手写 CSS 更安全 - 若必须自定义，用更高权重的选择器，比如
.my-row > .col配合padding覆盖，而不是硬顶.row
gx- 和 gy- 工具类的实际作用机制
这两个类不是“设置列间距”，而是**重设 .row 的水平/垂直负 margin 值，并同步调整 .col 的对应方向 padding**。比如 gx-3 表示：行左右 margin 各为 -1rem（即 -($spacer * 0.5)），同时每个 .col 左右 padding 各为 1rem。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：在已有 .row 上额外加 gx-4，但父容器宽度没留足，导致最后一列被挤到下一行——因为总宽度 = 列内容宽 + 所有列 padding + 行 margin 抵消量，算错就溢出。
实操建议：
-
gx-控制列间水平间距（等效于传统 gutter），gy-控制行间垂直间距，二者互不影响 - 数值是 Bootstrap 的 spacing scale（如
gx-0→0，gx-1→0.25rem，gx-5→3rem），别按像素硬猜 - 响应式写法如
gx-md-4只在md及以上生效，注意断点是否匹配你的设计稿
自定义负 margin 时最容易漏掉的兼容性点
Bootstrap 5 默认用 CSS 变量管理间距，比如 --bs-gutter-x。如果你在 :root 里覆盖它，看似一劳永逸，但会全局影响所有用到该变量的组件（如 list-group、accordion 的内部间距），而不仅是栅格。
另一个坑：IE11 不支持 CSS 变量，如果你还保有 IE 兼容需求，所有基于 var(--bs-gutter-x) 的自定义都会退化为默认值，负 margin 失效，布局错位。
实操建议：
- 只在特定场景覆盖，例如
.custom-grid .row，避免污染全局 - 手动写回退值：
margin-right: -1rem; margin-right: calc(var(--bs-gutter-x) * -0.5); - 检查
$enable-negative-marginsSass 变量是否为true（默认是），否则编译后压根不生成负 margin 规则
用 Sass 覆盖时，$grid-gutter-width 和 $grid-column-gap 的区别
Bootstrap 5.3+ 开始，$grid-gutter-width 是总 gutter 宽度（即两列之间的净间距），而 $grid-column-gap 是列与列之间的 gap 值（CSS Grid 语义）。但栅格系统实际用的是前者驱动负 margin 计算；后者仅用于 display: grid 模式下的 .row。
也就是说：你改了 $grid-column-gap，对传统 flex 栅格完全没影响；但改 $grid-gutter-width，会影响所有基于它的计算（包括 gx- 类、.row margin、.col padding）。
实操建议：
- 定制前先确认项目用的是 flex 还是 grid 模式（
$enable-grid-classes和$enable-cssgrid） - 如果只用 flex，专注改
$grid-gutter-width和$grid-gutter-widthsmap 就够了 - Sass 编译后，检查生成的 CSS 中
.row是否真有新值的负 margin，别只信变量名
负 margin 看似只是调个数值，但它卡在栅格渲染链最前端——动它就得同步算清 padding、容器宽度、断点行为、甚至 CSS 变量继承层级。一个没对齐，整行就偏移几像素，还不容易一眼看出来。
