<p>Bootstrap 5+ 的 mt-、p- 等间距类是编译时生成的静态值，不响应 CSS 变量（如 --bs-spacer），仅 --bs-gutter-x/y 用于栅格间隙；实现响应式间距需自定义类+媒体查询+CSS 变量组合。</p>
Bootstrap 5+ 默认不支持用 CSS 变量直接控制断点下的 margin 或 padding 类（比如 mt-3 在 md 下变 mt-5），它只提供静态类名，没有内置响应式变量映射。想靠纯 CSS 变量 + Bootstrap 原生类实现“一个类名、多断点间距”，必须自己补逻辑。
为什么不能直接用 --bs-gutter-x 控制 mt-* / p-* 类？
Bootstrap 的间距工具类（如 mt-2、ps-4）是编译时生成的静态规则，不读取运行时 CSS 变量。它只用了 --bs-gutter-x 和 --bs-gutter-y 这两个变量，且仅用于 container 和 row 的栅格间隙，和 spacing 工具类完全无关。
-
mt-3对应的是固定值：margin-top: 1rem（不管当前--bs-spacer是多少） - 即使你改了
--bs-spacer，mt-3也不会重算 —— 它压根没引用这个变量 - 所有
*-0到*-5类都是硬编码值，不是 calc() 计算出来的
如何用 CSS 变量 + 自定义类实现响应式间距？
核心思路：绕过 Bootstrap 工具类，用自定义类名 + calc() + 断点媒体查询 + CSS 变量组合出响应式效果。例如让 my-spacing 在 sm 下是 1rem，在 lg 下变成 2.5rem。
- 先在
:root定义基础变量：--spacer-sm: 1rem、--spacer-lg: 2.5rem - 写一个通用类：
.my-spacing { margin-block: var(--spacer-sm); } - 再用媒体查询覆盖：
@media (min-width: 992px) { .my-spacing { margin-block: var(--spacer-lg); } } - 如果想复用 Bootstrap 断点值，可导入
bootstrap/scss/_variables.scss中的$grid-breakpoints，或直接抄它的像素值（992px对应lg）
示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--spacer-xs: 0.5rem;
--spacer-sm: 1rem;
--spacer-md: 1.5rem;
--spacer-lg: 2.5rem;
}
<p>.my-mt {
margin-top: var(--spacer-sm);
}
@media (min-width: 768px) {
.my-mt {
margin-top: var(--spacer-md);
}
}
@media (min-width: 992px) {
.my-mt {
margin-top: var(--spacer-lg);
}
}能否让一个 class 同时生效多个断点（比如 mt-sm-2 mt-lg-4）？
可以，但得自己定义这些类 —— Bootstrap 本身不提供 mt-sm-* 这种语法（那是 Tailwind 的写法）。你要手动仿写，关键是命名一致、避免冲突。
- 推荐前缀区分：
mt-at-sm-2表示「在 sm 及以上生效」，mt-only-lg-4表示「仅在 lg 生效」 - 每个类都需配对应媒体查询：
.mt-at-sm-2 { @media (min-width: 576px) { margin-top: 0.5rem; } } - 注意：不要覆盖 Bootstrap 原有类名（如
mt-2），否则可能破坏其他组件样式 - 若项目已用 Sass，可封装 mixin：
@mixin responsive-margin-top($breakpoint, $value) { ... }，批量生成
真正麻烦的不是写几个 media query，而是维护一致性 —— 一旦设计系统里间距比例变了，所有自定义类、变量、媒体查询阈值都要同步更新，比直接用 Bootstrap 的 mt-* 类更易出错。
