.col上加gx-3无效，因gx-*类仅对.row或flex容器生效，其通过.row负margin与.col正padding配对实现列间距，且只作用于.row直接子元素为.col的结构。
为什么 .col 上加 gx-3 没反应
因为 gx-* 类只对 .row（或启用了 display: flex 的容器）生效，不是给 .col 设计的。你写成 <div class="col-6 gx-3">，DevTools 里根本看不到 <code>--bs-gutter-x 变量，CSS 规则压根没匹配上。
Bootstrap 5 的 gutter 是靠 .row 的负 margin 和 .col 的正 padding 配合实现的，这个机制只认直接子元素是 .col 的 .row。把 gx-* 加在其他地方，等于对空气调间距。
- 检查是否漏了
.row包裹 ——.col必须直接放在.row里，否则负 margin 抵消失效，左右多出 15px 空白 - 确认父容器是
.container或.container-fluid，否则栅格基线错位 - React-Bootstrap 等封装组件要查文档，看它是否把
className透传到原生<div class="row"> <h3>如何让小屏无 gutter、中屏起有 1rem、大屏变 1.5rem</h3> <p>别碰 <code>$grid-gutter-widthSass 变量，除非你要全局重编译整个 Bootstrap。最轻量、最可控的做法就是直接用响应式 gutter 工具类：<div class="row gx-0 gx-md-3 gx-lg-4"> <p>它会生成三组 CSS 自定义属性：<code>--bs-gutter-x: 0、--bs-gutter-x: 1rem、--bs-gutter-x: 1.5rem，且优先级高于全局变量。注意断点前缀含义：-
gx-sm-2表示从sm断点（≥576px）起生效 -
gx-md-0表示从md（≥768px）起取消水平 gutter - 别混用
px-*类来“模拟” gutter —— 它们改的是 padding，不参与栅格流计算，容易导致换行错位
自定义 CSS 覆盖不了
gx-*怎么办根本原因不是你写错了，而是浏览器没选中你的规则。Bootstrap 的
gx-*是通过高权重选择器（如.row.gx-3）+ CSS 自定义属性实现的，单写.row { --bs-gutter-x: 0 }权重不够，会被覆盖。正确做法是复刻它的选择器结构，或提升上下文限定：
- 确保你的 CSS 文件在
bootstrap.min.css之后加载（检查 HTML 中<link>顺序，Vite/Webpack 构建时可能打乱，得看最终渲染源码） - 用组合选择器提权，比如
.my-section .row.gx-3或body .row.gx-3 - 避免
!important—— Bootstrap v5.2+ 已在部分工具类里用它，你加了反而可能被它新规则对冲 - 如果用 Sass，可在引入 Bootstrap 前重定义变量，但仅限项目统一调整，不适合局部 hack
手动改
.row margin或.col padding为什么更糟因为破坏了 Bootstrap 栅格的 flex 换行逻辑。比如你给
.col-6加mx-3，看着有空隙，但在小屏下本该堆叠，却因外边距导致总宽度超 100%，内容溢出或错位。gutter 工具类是唯一安全出口，它只改自定义属性，底层 flex 计算仍走标准路径。而手调 margin/padding 是在绕过设计契约，后续升级或嵌套 row 时大概率连锁崩坏。
真正难的不是“怎么加间距”，而是“怎么让间距只在该生效的地方生效、且不干扰换行与断点行为”——这正是
gx-*类存在的全部意义。 -
