不能手动修改 .row 的 margin，因为 bootstrap 5 依赖 .row 负外边距与 .col 正内边距配对实现列间距，单独清空 margin 会破坏配对，导致列左偏、换行错乱。
直接改 .row 的 margin 或 .col 的 padding 会破坏配对机制，导致列偏移、换行错乱；最安全有效的方式是用 gx-0 类清空水平间距，或局部覆盖 --bs-gutter-x 变量。
为什么不能手动调 .row 的 margin
Bootstrap 5 的列间距靠 .row 的负外边距（如 margin-left: -0.5rem）和 .col 的正内边距（如 padding-left: 0.5rem）配对实现。单独把 .row 的 margin 改成 0，.col 的 padding 还在，整行内容就会向左偏移，小屏下还容易换行错位。
- DevTools 里看到
.col的padding-left和padding-right各为0.5rem，但.row的margin-left却是0→ 典型配对失效 - 列看起来“挤在一起”，右侧却多出异常空白
- 响应式断点切换时，列突然换行或宽度错位
用 gx-0 快速清空水平列间距
gx-0 是 Bootstrap 5 内置工具类，它会同时重置 .row 的左右负外边距和 .col 的左右内边距，真正清除列间水平间隙，不破坏布局逻辑。
- 必须加在
<div class="row gx-0"> 上，加在 <code>.col或外层容器上无效 - 支持响应式写法：
gx-0 gx-md-3表示小屏无间隙，中屏起恢复1rem水平间距 - 别用
px-0模拟：px-0只清.col的内边距，不抵消.row的负边距，结果是整行左偏0.5rem - 写在特定容器内，避免污染全局：
.my-section .row { --bs-gutter-x: 0.375rem; }（即6px） - IE11 不支持 CSS 变量，需加回退：
margin-right: -0.375rem; margin-right: calc(var(--bs-gutter-x) * -0.5); - 不要在
:root里设--bs-gutter-x：它会影响list-group、accordion等组件的内部间距 -
$grid-gutter-width: 0.75rem;必须写在所有@import语句之前 - 必须重新编译整个 Bootstrap，不能只 import 部分模块
- Bootstrap 5.3+ 中，
$grid-gutter-width仅用于初始化$guttersmap，真正生效的是编译后生成的gx-*类和--bs-gutter-x变量
局部覆盖 --bs-gutter-x 变量更灵活
如果需要非标准值（比如 6px），或仅对某块区域生效，直接设置 CSS 变量比改 Sass 更轻量：
什么时候才该动 Sass 变量
只有当全站几十个 .row 都要统一改成固定值（比如全部改为 12px），才值得走 Sass 重编译流程：
真正影响“列之间”的是 gutter；如果列内文字贴边，该调的是 .col 内部的 px-3，而不是碰 gx- —— 这个边界最容易被忽略。
