gx-* 和 gy-* 必须加在 .row 上才生效
直接写 <div class="col-6 gx-3"> 完全没用，DevTools 里根本看不到对应 CSS 变量。gutter 类只对 .row（或启用了 display: flex 的容器）起作用，因为 Bootstrap 5 的 gutter 是靠 .row 的负 margin 和 .col 的正 padding 协同实现的——这个机制只认 .row 的直接子元素是 .col 的情况。
常见错误现象：
<div class="col-6 px-3"> 看起来有空隙，但小屏下本该堆叠的 col-md-6 可能因宽度超限而错位甚至溢出给 .row 手动加 style="margin: 0"，会破坏所有列与容器边缘的对齐，打印或缩放时容易错位React-Bootstrap 等封装组件没透传 className 到原生 <div class="row">，类名被吃掉，gutter 不出现
响应式 gutter 要用 gx-{breakpoint}-{size}，别碰 $grid-gutter-width
想实现“小屏无间隙、中屏 1rem、大屏 1.5rem”，最轻量做法就是：<div class="row gx-0 gx-md-3 gx-lg-4">。它会生成对应的 CSS 自定义属性：–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>、<h3> 自带的 margin-bottom 当作 .row 问题去调想让第二行比第一行多留 24px 垂直空隙？给第二行加 mt-4（≈24px），而不是改 gy-*
精细控制两列间特殊间距时，别硬调 gutter——它会干扰栅格计算，小屏下可能无法占满父容器宽度，或和 order 类冲突。更稳妥的是利用 flex 布局特性，在列内部加空白，或用自动外边距推挤。
评论(0)