gx-/gy-类必须作用于.row容器才生效，因bootstrap 5通过.row负margin与.col正padding协同实现gutter机制；单独用于.col无效，且需注意响应式断点、自定义断点编译及避免px-*误用。
gx-* 和 gy-* 必须加在 .row 上才生效
直接写 <div class="col-6 gx-3"> 完全没用，DevTools 里根本看不到对应 CSS 变量。gutter 类只对 <code>.row（或启用了 display: flex 的容器）起作用，因为 Bootstrap 5 的 gutter 是靠 .row 的负 margin 和 .col 的正 padding 协同实现的——这个机制只认 .row 的直接子元素是 .col 的情况。
常见错误现象：
<div class="col-6 px-3"> 看起来有空隙，但小屏下本该堆叠的 <code>col-md-6可能因宽度超限而错位甚至溢出- 给
.row手动加style="margin: 0"，会破坏所有列与容器边缘的对齐，打印或缩放时容易错位 - React-Bootstrap 等封装组件没透传
className到原生<div class="row">，类名被吃掉，gutter 不出现<h3>响应式 gutter 要用 gx-{breakpoint}-{size}，别碰 $grid-gutter-width</h3> <p>想实现“小屏无间隙、中屏 1rem、大屏 1.5rem”，最轻量做法就是：<code><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，且优先级高于全局 Sass 变量。注意事项：
-
gx-sm-2表示从sm断点（≥576px）起生效；gx-md-0表示从md（≥768px）起取消水平 gutter - 如果自定义了断点（比如新增
xs: 0, sm: 480px），必须同步调用@include generate-gutter-classes()，否则gx-xs-2这类类名压根不会被编译出来 - 改
$grid-gutter-width是全局行为，需重新编译整个 Bootstrap，适合统一设计规范，不适合局部调整
别用 px-* 替代 gx-*，它不重置 .row 的负 margin
px-0只清掉.col的左右内边距，但.row的margin-left: -15px还在——结果是整行向左偏移 15px，视觉上列紧贴边缘，实际布局已失衡。而gx-0会同时重置.row的负外边距和.col的内边距，真正清空 gutter。性能与兼容性影响：
-
px-3只加 padding，不抵消 margin，容易在.container-fluid下触发横向滚动条 -
gx-3是框架原生支持的语义化控制，CSS 变量注入方式更稳定，兼容性覆盖所有现代浏览器 - 想恢复默认间距？直接用
gx-3，别试图用px-3模拟——它只加 padding，不匹配 gutter 机制
垂直间距（gy-*）和两行之间距离不是一回事
gy-2控制的是多行.row之间的垂直 gutter，比如卡片网格中上下两行的间隔。但它不适用于“两个内容区块之间”的垂直留白——那是mt-*或mb-*的职责。容易踩的坑：
- 直接给
.row加margin-bottom：会导致嵌套结构（如卡片内部再套.row）也被撑开，破坏内边距一致性 - 误把
<p></p>、<h3></h3>自带的margin-bottom当作.row问题去调 - 想让第二行比第一行多留 24px 垂直空隙？给第二行加
mt-4（≈24px），而不是改gy-*
精细控制两列间特殊间距时，别硬调 gutter——它会干扰栅格计算，小屏下可能无法占满父容器宽度，或和
order类冲突。更稳妥的是利用 flex 布局特性，在列内部加空白，或用自动外边距推挤。 -
