直接改$grid-gutter-width变量只在Sass编译项目中有效，CDN或纯CSS项目中无效；因gutter类尺寸源自$gutters map并编译固化，未重编译则浏览器看不到新规则，且该变量在5.3+仅用于初始化，不控制运行时行为。
直接改 $grid-gutter-width 变量只在 Sass 编译项目中有效，CDN 引入或纯 CSS 项目里改了也白改。
为什么改了变量页面没变化
Bootstrap 5 的 gutter 工具类（如 gx-3）不是靠读取 $grid-gutter-width 实时计算的，而是编译时把变量值“固化”进 CSS 规则里。你改了变量但没重新编译 CSS，浏览器根本看不到新规则。
-
$grid-gutter-width: 1rem是默认值，它只影响未加响应式类的.row的 fallback 行为（比如只写class="row"时的水平间距） - 一旦写了
gx-2或gx-md-4，这些类会生成自己的--bs-gutter-x自定义属性，完全绕过$grid-gutter-width - 如果你用的是官方 CDN 链接，
$grid-gutter-width就是只读的——它不在运行时暴露，也无法通过 JS 或:root覆盖生效
哪些变量真能控制 gutter 大小
真正参与 gutter 类生成的，是 $gutters 这个 map，不是单个 $grid-gutter-width：
-
$gutters: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem)—— 所有gx-*类的尺寸来源 -
$grid-gutter-width只用于推导$gutters的初始值，比如$grid-gutter-width: 1.5rem会让gx-3对应1.5rem，但前提是你要重跑@include generate-gutter-classes() - 想新增
gx-6？必须往$guttersmap 里加键值对，再确保@include generate-gutter-classes()被调用，否则类名压根不会出现在输出 CSS 里
改完变量后必须做的三件事
光改变量不等于生效，漏掉任意一步都会导致样式不更新：
- 确认你的构建流程真的调用了 Bootstrap 的 SCSS 入口（比如
@import "bootstrap/scss/bootstrap"），而不是只 import 了部分模块 - 检查是否在
@import之前就覆盖了$gutters和断点变量（$grid-breakpoints）——顺序错了，新值会被忽略 - 如果自定义了断点（比如加了
xl2: 1400px），必须同步在@include generate-gutter-classes()前声明，否则gx-xl2-3这种类不会生成
最常被忽略的一点：$grid-gutter-width 在 Bootstrap 5.3+ 中已降级为“仅初始化用途”，它不再控制任何运行时行为。真正起效的是 $gutters map 和编译后生成的 CSS 类——这意味着，局部调整永远优先用 gx-* 工具类，全局统一才碰变量。
