g-0到g-5是作用于.row的css变量开关，统一设置--bs-gutter-x和--bs-gutter-y，控制行列间距；加在.col上无效，旧版bootstrap 4不支持，响应式需用gx-/gy-组合，嵌套.row须用g-0隔离。
g-0 到 g-5 是作用在 .row 上的 CSS 变量开关，不是给 .col 加 padding
直接写 g-0 到 g-5 类，只对 .row 元素生效，它会同时设置 --bs-gutter-x 和 --bs-gutter-y 两个 CSS 变量。这些变量被 Bootstrap 内部用于计算 .row 的负外边距和 .col 的内边距，是一套配对机制。你如果把它加在 .col 上，完全没效果——浏览器开发者工具里也看不到任何样式变化。
常见错误现象：
– 给 .col 加了 g-3，结果列之间还是紧贴着
– 在 .row 上写了 g-3，但页面没反应 → 很可能是用了旧版 Bootstrap 4 的 CDN，g-* 类在 v4 中不支持（v4 要用 .no-gutters 或自定义 CSS）
-
g-0：彻底关闭行列间距，.row的margin和.col的padding都归零 -
g-2：水平 + 垂直 gutter 都设为0.5rem（约 8px），对应 Sass 变量$spacer * .5 -
g-5：设为3rem（约 48px），是默认最大值
gx- 和 gy- 要分开用，别指望 g-3 在手机上自动变小
g-3 是“一刀切”，所有断点都生效；真要响应式控制，必须拆开用 gx-* 和 gy-*。比如想让移动端列紧贴、桌面端拉开，不能只写 g-3，得写 gx-0 gx-lg-3 —— 这样小屏时 --bs-gutter-x 是 0，大屏（≥992px）时自动升为 1rem，且框架会同步修正 .row 的负 margin 和 .col 的 padding。
容易踩的坑：
– 混用 g-3 gy-0：后者会覆盖前者的垂直部分，但水平仍为 1rem，不是清零
– 写成 gx-0 gy-md-2 却忘了 gy-0 默认不继承，中屏以下垂直 gutter 还是默认值（1.5rem）
-
gx-0：仅关水平 gutter，不影响行与行之间的上下空隙 -
gy-2：只调垂直 gutter，适合多行表单或卡片堆叠场景 - 多个类共存时，后写的优先级更高，例如
gx-md-1 gx-lg-3→ lg 断点下以gx-lg-3为准
别用 px-* 模拟 g-*，它根本绕不开 .row 的负 margin
px-3 是给单个元素加左右 padding，而 gx-3 是改整行的 gutter 行为。如果你在 .col 上写 px-0 px-lg-3，小屏确实没内边距，但 .row 的 margin-left: -15px 还在，结果就是整行左偏 15px，容器右侧多出白边；大屏下 px-lg-3 只加了 0.75rem padding，却没抵消那 15px 负 margin，列宽计算就乱了。
典型症状：
– 页面出现横向滚动条
– .container-fluid 边缘内容被截断
– 嵌套的 .row 内部列错位
- 想“还原默认间距”？直接用
gx-3，别试px-3—— 它只加 padding，不处理 margin 抵消逻辑 - 调试时别在 DevTools 里手动删
.col的padding，那只会掩盖问题根源 - 全局改默认 gutter？去 Sass 里覆盖
$grid-gutter-width，而不是每个.row都加gx-3
嵌套 .row 会继承父级 gutter，隔离要用 g-0
子 .row 默认会继承父 .row 的 --bs-gutter-x/y 值。比如外层用了 gx-4，里面卡片内部再套一个 .row，那卡片里的列也会有 1.5rem 水平间隙——这通常不是你想要的。
解决办法很简单：在嵌套的 .row 上显式加 g-0，它会重置该行自己的 gutter 变量，不干扰外层。
- 嵌套结构常见于卡片（
.card）内部网格、模态框（.modal-body）布局 - 别用
mx-0或px-0去“修”嵌套列，那只是表面抹平，实际宽度已超限 -
g-0是唯一能干净切断 gutter 继承的方式，比写style="--bs-gutter-x: 0"更可靠
真正容易被忽略的是：gutter 控制永远从 .row 出发，哪怕你只想调一列的间距，也要先确认它所在的 .row 是否被其他 g-* 类影响。
