g-3仅对.row生效，用于设置.col间水平与垂直间距；表单垂直堆叠应优先用gy-2而非g-3，响应式需gx-0 gx-md-3组合控制水平间距。
g-3 是给 .row 用的，不是给表单控件加的
直接在 <div class="row"> 上加 <code>g-3，才能让内部的 .col 之间产生水平 + 垂直间距；加在 .form-control、.col 或普通 <div> 上完全无效。Bootstrap 5 的 gutter 机制依赖 <code>.row 的负 margin 和 .col 的正 padding 配对抵消，这个逻辑只对直接子元素为 .col 的 .row 生效。
常见错误现象：
- 给
<input class="form-control g-3">加类 —— DevTools 里根本看不到--bs-gutter-x变量 - 在
<div class="col"> 上写 <code>gx-3—— 无样式变化，列仍紧贴 - 用
mb-3替代gy-3控制表单行距 —— 导致父容器高度不可控、打印时错位 - 多行
.col-12表单字段组（如姓名、邮箱、密码） - 带标签的
.form-group堆叠布局 - 卡片内嵌表单，需避免上下留白过大
表单多行堆叠时，优先用 gy-2 而不是 g-3
g-3 同时设置水平和垂直间距，在纯垂直堆叠的表单（如 .col-12 每行一个字段）中，水平方向的 gutter 没意义，还可能干扰全宽控件的对齐。更合理的是用 gy-2：它只控制行与行之间的垂直间隙，值为 0.5rem（8px），视觉紧凑又不拥挤。
使用场景：
示例写法：
<div class="row gy-2"> <br><div class="col-12"> <label>用户名</label><input class="form-control"> </div> <br><div class="col-12"> <label>邮箱</label><input class="form-control"> </div> <br> </div>
响应式表单行距：gx-0 gx-md-3 才真“小屏紧贴、大屏拉开”
想让手机上表单字段无缝堆叠、桌面端才拉开间距？别用 px-0 px-lg-3 —— 它只改 .col 的 padding，没动 .row 的负 margin，结果大屏下整行右偏 15px。正确做法是显式重置所有断点的水平 gutter：gx-0 gx-md-3。
关键点：
-
gx-0先清掉默认的gx-2（xs 下 fallback 值） -
gx-md-3从 md 断点（≥768px）起生效，值为1rem - 顺序无关，但必须两个都写，缺一不可
- 如果还要加大屏间距，接上
gx-lg-4即可
错误写法：<div class="row px-0 px-lg-3"> → 右侧溢出、容器不对齐
<h3>为什么 gy-2 比 mb-2 更适合表单行距</h3>
<p><code>gy-2 是基于 flex gap 的原生布局间距，不改变盒模型尺寸，不影响父容器高度计算，缩放或打印时表现稳定；而 mb-2 是外边距，会撑开父容器、可能触发换行或横向滚动条，尤其在 .container-fluid 下容易右侧留白。
性能与兼容性影响：
-
gy-2由 CSS 自定义属性--bs-gutter-y驱动，所有现代浏览器支持良好 -
mb-2在高 DPI 屏幕或 zoom=125% 时，可能造成相邻元素间距不一致 - 混合使用
gy-2和mb-2会导致纵向间距翻倍，调试时很难定位
真正要小心的是：别在同一个 .row 里混用 gy-* 和 mb-* 类 —— 这种叠加几乎必然导致表单在不同视口下错位。
