gutter 类必须加在 .row 上，加在 .col 或普通 div 上无效；bootstrap 5 通过 .row 的负 margin 与 .col 的正 padding 配合实现列间距，仅对直接子元素为 .col 的 .row 生效。
gutter 类必须加在 .row 上，加在 .col 或普通 div 上完全无效
Bootstrap 5 的 gutter（列间距）是靠 .row 的负 margin 和 .col 的正 padding 配对实现的，这个机制只对直接子元素为 .col 的 .row 生效。你给 .col-6 加 mx-3，看起来有空隙，但会破坏 flex 换行逻辑——比如 col-md-6 在小屏下本该堆叠，结果因手动外边距导致宽度超限、错位甚至溢出。
-
gx-3、gy-2、g-lg-4这些类只能作用于.row（或启用了display: flex的容器） - 写成
<div class="col-6 gx-3"> —— 无任何效果，DevTools 里也看不到对应 CSS 变量<li>React-Bootstrap 等封装组件要确认是否透传 <code>className到原生div.row，否则类名会被吃掉 -
gx-sm-2表示从sm断点（≥576px）起生效；gx-md-0表示从md（≥768px）起取消水平 gutter - 改 Sass 变量
$grid-gutter-width是全局行为，需重新编译整个 Bootstrap，适合统一设计规范，不适合局部调整 - 如果自定义了断点（比如新增
$grid-breakpoints: (xs: 0, sm: 480px, ...)），必须同步调用@include generate-gutter-classes()，否则gx-xs-2这类类名压根不会被编译出来 <div class="row g-0"> → 所有屏幕尺寸下 gutter 彻底归零<li>注意：清零后 <code>.col之间紧贴，但内容仍受自身padding影响；如需内容也贴边，得额外给.col加p-0- 旧项目迁移时容易漏掉这个点，DevTools 里看到
no-gutters类名还在，但样式面板里查不到规则，就是这个原因 - 在第一个
.col里放内容时，末尾加一个<div class="ms-auto" style="width: 2rem;"></div>，不破坏列宽，只撑开右侧空间 - 或者给第二个
.col内部的卡片加mx-3，这样只影响卡片自身，不影响栅格流 - 绝对避免给
.col设width、float、display: inline-block—— 这些会让它脱离 flex 容器约束，后续断点切换大概率崩
响应式 gutter 要用 gx-{breakpoint}-{size}，别碰 $grid-gutter-width 变量除非全局重编译
想“小屏无间隙、中屏开始有 1rem、大屏变 1.5rem”，最轻量做法就是直接写：<div class="row gx-0 gx-md-3 gx-lg-4">。它会生成对应的 CSS 自定义属性：<code>--bs-gutter-x: 0、--bs-gutter-x: 1rem、--bs-gutter-x: 1.5rem，且优先级高于全局变量。
想取消所有 gutter？用 g-0，别信 no-gutters
no-gutters 是 Bootstrap 4 的废弃类，5 里已彻底移除。写了也不报错，但毫无作用——浏览器根本找不到对应样式。真正有效的清零方式只有 g-0（同时清水平+垂直）、gx-0（仅水平）、gy-0（仅垂直）。
精细控制两列间特殊间距？别硬调 .col 的 padding，用 ms-auto 或内嵌 mx-* 更安全
如果只是想让第二列右移一点（比如双卡片布局中右侧卡片多留白），强行给 .col-6 加 ps-4 会干扰栅格计算：小屏下它可能无法占满父容器宽度，或和 order 类冲突。更稳妥的是利用 flex 布局特性，在列内部加空白，或用自动外边距推挤。
Bootstrap 的 gutter 控制本质是“容器驱动”，不是“列驱动”。所有问题的根源，几乎都来自把类加错了位置，或者试图绕过 .row 去直接操作 .col。只要记住 g* 类只对 .row 有效，90% 的间距异常就消失了。
