<p>Bootstrap 5 的 gutter 是通过 .row 负 margin 与 .col 正 padding 协同实现的列间隙，直接改 .col 的 margin 不生效是因为会被内置样式覆盖；应使用 g-* 响应式工具类或 CSS 变量定制。</p>
Bootstrap 5 的 gutter 是什么，为什么直接改 margin 不生效
Bootstrap 5 的栅格系统默认用 gutter 控制列之间的间距（即“列间隙”），它不是靠给 .col 加 margin 实现的，而是通过给父容器（如 .row）设负的 margin，再给子列（.col）设正的 padding 来“撑开”间隙。所以你直接在 .col 上写 margin-right 或覆盖 padding，大概率会被内置样式覆盖或破坏对齐。
正确做法是使用 Bootstrap 内置的 gutter 工具类，或自定义 CSS 变量。
-
.row.g-0：关闭所有 gutter（间隙为 0） -
.row.g-2到.row.g-5：对应预设尺寸（g-2= 0.5rem，g-3= 1rem，依此类推） -
.row.gx-3：仅控制水平方向（x 轴）gutter -
.row.gy-2：仅控制垂直方向（y 轴）gutter
如何在响应式表单中按断点单独设置 gutter
Bootstrap 支持响应式 gutter 类，语法是 g{breakpoint}-{size}，比如 g-md-3 表示在 md 及以上断点用 g-3 的间距，更小屏幕则回退到默认（或上一级定义）。
常见组合：
-
.row.g-2.g-md-3.g-lg-4：移动端 0.5rem，平板 1rem，桌面 1.5rem -
.row.gx-0.gx-md-3：小屏无水平间隙，中屏起加 1rem 水平间隙（适合紧凑型表单标签+输入框并排） - 注意：
gy-在表单中较少用，除非你用.row布局多组.form-group垂直堆叠
自定义 gutter 尺寸（不依赖预设值）
如果你需要 0.75rem、1.25rem 这种非标准值，别硬写 inline style —— 推荐改 CSS 变量或扩展 Sass。
纯 CSS 方案（无需构建）：
:root {
--bs-gutter-x: 0.75rem;
--bs-gutter-y: 0.5rem;
}这样所有 .row 都会按新变量计算 padding/margin；但注意：它会影响全局，若只想局部生效，得加作用域：
- 给特定表单加 class，比如
<div class="my-form"><div class="row">...</div></div> - 然后写：
.my-form .row { --bs-gutter-x: 0.75rem; }
Sass 用户可直接重定义 $grid-gutter-width 变量，或用 map-merge 扩展 $grid-gutter-widths 映射。
表单中容易被忽略的 gutter 影响点
gutter 不只影响列间距，还隐式影响表单控件的对齐和换行行为：
- 用
.row > .col-6 > .form-control时，如果gutter太大，两列可能因总宽超 100% 而强制换行（尤其在小屏） -
.form-floating和.input-group内部有自身 padding，叠加gutter后可能让控件显得拥挤，建议搭配py-0或my-n1微调 - 自定义
gutter后，记得检查label和input的垂直居中是否还一致——因为gutter-y会增加行高，可能拉偏基线
最稳妥的方式：先用 g-* 类快速验证效果，再按需定制；别一上来就覆盖 padding 或 margin，否则 debug 成本远高于读一遍 官方 gutter 文档。
