直接改--bs-gutter-x或用gx-*类最轻量可靠；动$grid-gutter-width仅适合全站统一调整且需重编译；因bootstrap 5的gutter依赖.row负外边距与.col正内边距严格配对，单独修改任一者会破坏抵消机制，导致内容偏移、换行错乱。
直接改 --bs-gutter-x 或用 gx-* 类是最轻量、最可靠的方式；动 Sass 变量 $grid-gutter-width 只适合全站统一调整，且必须重编译。
为什么不能直接改 .row 的 margin 或 .col 的 padding
Bootstrap 5 的 gutter 是靠 .row 的负外边距和其直接子元素 .col 的正内边距配对抵消实现的。单独修改其中任一值都会破坏这个配对：
- 写
.row { margin: 0 }→.col的padding-left/padding-right暴露出来，整行内容左偏，小屏换行错乱 - 只给
.col加px-3→.row的负 margin 还在，结果是右侧留白异常、容器宽度超限 - DevTools 里看到
.col有 padding 但列间无空隙？大概率是.row没加 gutter 类，或类名写在了.col上
用 gx-* / gy-* 类控制单个 row 的间距
这些类本质就是给 .row 设置 --bs-gutter-x 或 --bs-gutter-y，无需编译，优先级高，推荐日常使用：
- 必须加在
<div class="row"> 上，加在 <code>.col或外层容器上完全无效 -
gx-0清空水平 gutter，gy-2设垂直 gutter（约 0.5rem），g-3同时设两者 - 响应式写法如
gx-md-3表示从md断点（≥768px）起生效，值取自$spacers[3]（默认为 1.5rem） - 想“小屏无间隙、中屏 1rem、大屏 1.5rem”：必须写全
gx-0 gx-md-3 gx-lg-4，漏掉gx-0就会沿用默认gx-2 <div class="row" style="--bs-gutter-x: 0.75rem;"> —— 立即生效，不依赖类名系统<li>若要限定作用域，写 CSS：<code>.my-section .row { --bs-gutter-x: 0.5rem; }，避免影响其他组件- IE11 不支持 CSS 变量，需回退：
margin-right: -0.5rem; margin-right: calc(var(--bs-gutter-x) * -0.5); - 别在
:root里覆盖--bs-gutter-x：它会被工具类生成的同名变量压制，但若你写了:root { --bs-gutter-x: 0 }，反而会压制所有gx-*类效果 - 必须把
$grid-gutter-width: 0.75rem;写在所有@import语句之前 - 必须重新编译整个 Bootstrap（不能只 import
grid模块） - Bootstrap 5 不再支持
$grid-gutter-width-sm这类断点级变量，如需差异化，得手动扩展 SCSS 或用工具类组合 - 改完后，所有栅格行为（包括
row-cols-*、嵌套.row）都会同步更新，影响面广，务必验证表单、卡片、列表等复合场景
运行时动态调整或局部覆盖，直接操作 CSS 变量
JS 控制或需要精细微调时，内联设置变量比切类更灵活：
什么时候才该动 Sass 变量 $grid-gutter-width
仅当全站几十个 .row 都要统一改成某个固定值（比如全部设为 12px），才值得走 Sass 重编译流程：
真正容易被忽略的是：gutter 控制的是「列之间」的空隙，不是「内容与列边框之间」的距离。如果列内文字贴边，该调的是 .col 的 px-3 或自定义 padding，而不是去碰 gx-——后者一动，整个栅格对齐就可能偏移。
