bootstrap 5 的 gutter 类需作用于 .row 元素，通过 gutter-{breakpoint}（如 gutter-md）实现断点响应，依赖 css 变量（如 --bs-gutter-x-md），sass 用户应扩展 $gutters map 并重新编译，cdn 用户需手动定义断点变量或媒体查询覆盖。
Bootstrap 5 的 gutter 类怎么在特定断点生效
Bootstrap 5 的列间距（gutter）不是靠自定义 CSS 写死的，而是通过预设的响应式 gutter-{breakpoint} 工具类控制。比如想让 md 断点起才有 2rem 间距，就用 gutter-md，而不是写媒体查询手动覆盖。
关键点：这些类只对 .row 生效，且必须配合 data-gutter 或直接使用类名——Bootstrap 5.3+ 才支持 data-gutter 属性，旧版只能用类名。
-
gutter-0到gutter-5是基础尺寸（对应--bs-gutter-x/y变量），gutter-sm、gutter-md等才是断点前缀 - 断点前缀必须紧跟
gutter-，不能写成md-gutter-3或gutter-md-3（后者无效） - 多个断点可叠加，比如
gutter-sm gutter-lg表示 sm 起启用 gutter，lg 起用更大值（前提是已定义--bs-gutter-x-lg）
为什么加了 gutter-md 却没效果
最常见的原因是：父容器不是 .row，或者用了 .container / .col 直接套用——gutter 类只修改 .row 的 margin 和子 .col 的 padding，其他元素上加无效。
另一个坑是：你改了 --bs-gutter-x 的 CSS 变量，但没同步改对应断点的变量，比如只设了 :root { --bs-gutter-x: 1rem; }，那 gutter-md 还是读 --bs-gutter-x-md（默认未重写，沿用根变量）。
- 要定制断点 gutter，得显式设置变量，例如：
:root { --bs-gutter-x-md: 1.5rem; } - Bootstrap 默认只定义了
--bs-gutter-x和--bs-gutter-y，断点变量需自己补全（-sm、-md等） - 如果用了 Sass，推荐在
$guttersmap 里扩展，比硬写 CSS 变量更可靠
用 Sass 自定义断点 gutter 的实际写法
如果你用 Bootstrap 源码编译，最稳妥的方式是在 _variables.scss 里调整 $gutters map，它会自动产出所有断点的类和 CSS 变量：
$gutters: ( 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem, // 新增 md 断点专属值 "md": 2rem, "lg": 2.5rem );
这样编译后就会生成 .gutter-md、.gutter-lg 类，并设置对应的 --bs-gutter-x-md 变量。
- 注意键名用字符串
"md"，不是md（Sass 中未引号会被当变量） - 这个 map 会影响所有 gutter 类，包括
gutter-3和gutter-md，别漏掉基础数值 - 改完必须重新编译 CSS，纯 CDN 引入无法生效
纯 CSS 方式临时覆盖某断点 gutter
如果没法动源码或 Sass，又必须现场改，可以用带媒体查询的 CSS 强制覆盖，但要注意选择器权重：
@media (min-width: 768px) {
.row.gutter-md {
--bs-gutter-x: 1.75rem;
--bs-gutter-y: 1rem;
}
}
这种写法有效，但有风险：它只作用于同时带 .row 和 .gutter-md 的元素，且依赖 Bootstrap 的 CSS 变量机制（v5.1+ 支持）。如果项目还在用 v4，就得退回到 margin/padding 手动调。
- v4 没 CSS 变量，gutter 全靠固定 class，比如
gutter-3对应margin-right: -15px，没法按断点切分 - v5.0–5.0.2 有变量但没断点变量，
gutter-md类存在但不生效，得升级到 5.1+ - 用
!important强打 margin/padding 容易和后续版本冲突，不推荐
断点 gutter 的核心其实是变量 + 响应式类的组合，不是“写个 CSS 就行”，得先确认 Bootstrap 版本和构建方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
