g-sm-2是Bootstrap 5+的响应式栅格间距类，作用于.row或flex容器，表示从sm断点（≥576px）起生效，同时设置水平与垂直间距为0.5rem。
g-sm-2 是什么，它在哪个断点生效
g-sm-2 是 Bootstrap 5+ 提供的响应式 gutter 工具类，作用于 .row 元素，表示「从 sm 断点起（≥576px） 开始启用水平 + 垂直方向均为 0.5rem 的列间距」。它不会在超小屏（g-* 类，就回退到全局默认 gutter（通常是 1.5rem）。
注意：g-sm-2 不是“仅在 sm 生效”，而是“sm 及以上所有更大断点都生效”，除非被更具体的类（如 g-md-4）覆盖。
为什么加了 g-sm-2 却在手机上还有间距
这是最常被误解的一点：gutter 类只在满足断点条件时才激活。如果你在手机（宽度 g-sm-2 根本不参与计算，此时实际生效的是：
- 没写任何
g-*类 → 回退到全局默认值（$grid-gutter-width: 1.5rem） - 写了
g-0→ 所有断点都清零，包括手机 - 写了
g-xs-1→ Bootstrap 5 并不提供xs前缀，该类无效
想让手机也用 0.5rem，得补上 g-2：g-2 g-sm-2 ——前者兜底小屏，后者接管中屏及以上。
g-sm-2 和 gx-sm-2 / gy-sm-2 的区别
g-sm-2 同时设置水平与垂直 gutter；而 gx-sm-2 只管左右（--bs-gutter-x），gy-sm-2 只管上下（--bs-gutter-y）。三者可共存，但要注意覆盖顺序：
-
g-sm-2 gy-sm-0→ 中屏起水平间距为0.5rem，垂直间距为0 -
gy-sm-0 g-sm-2→ 后者优先，垂直间距仍为0.5rem（g-sm-2覆盖了gy-sm-0） -
gx-sm-3 gy-sm-1比g-sm-2更精细，适合图文混排等不对称需求
别用 px-sm-2 替代 gx-sm-2：前者只改 .col 的 padding，不碰 .row 的负 margin，布局会撑出容器边界。
如何验证 g-sm-2 是否真正生效
打开浏览器开发者工具，选中目标 .row，检查 computed 样式里的：
-
--bs-gutter-x和--bs-gutter-y是否已设为0.5rem -
margin-left/margin-right是否为-0.25rem（即--bs-gutter-x / 2） -
.col元素的padding-left/padding-right是否为0.25rem
如果值仍是 0.75rem（对应 1.5rem gutter），说明断点未命中，或被其他 CSS 覆盖。此时优先检查是否漏写了 g-* 类兜底，而不是急着加 !important。
