bootstrap 5 不支持响应式背景渐变类，需用媒体查询配合 background-image 手动实现；示例中 .bg-gradient-responsive 在小屏、中屏、大屏分别应用蓝、紫、橙渐变，断点需与 bootstrap 一致，避免使用 !important 或不存在的 d-md-bg-gradient-* 类。
Bootstrap 5 中 background-gradient 如何响应式切换
Bootstrap 5 默认不提供响应式背景渐变类（比如 .bg-gradient-primary-sm 这种），所有内置的 bg-gradient-* 类（如 bg-gradient-primary）都是静态应用，不会随断点自动切换颜色。想实现“小屏蓝、中屏紫、大屏橙”的渐变色切换，必须手动覆盖或扩展。
用 CSS 自定义响应式渐变类最可靠
直接在自定义 CSS 中用媒体查询 + background-image 控制不同断点下的渐变值，比试图魔改 Bootstrap 的 Sass 变量更轻量、更可控。注意：渐变必须用 background-image（不是 background-color），否则会被 Bootstrap 的 bg-* 类覆盖。
示例写法：
.bg-gradient-responsive {
background-image: linear-gradient(135deg, #0d6efd, #0a58ca);
}
@media (min-width: 576px) {
.bg-gradient-responsive {
background-image: linear-gradient(135deg, #6f42c1, #5a32a3);
}
}
@media (min-width: 992px) {
.bg-gradient-responsive {
background-image: linear-gradient(135deg, #fd7e14, #e66100);
}
}
- 务必使用
background-image，避免和bg-*类冲突 - 断点值（
576px、992px）需与你项目中 Bootstrap 的$grid-breakpoints一致 - 渐变方向（如
135deg）建议统一，否则视觉跳变明显
别用 !important 强行覆盖 Bootstrap 的 bg-* 类
有人尝试组合 bg-gradient-primary d-md-bg-gradient-warning 并加 !important，这不可靠：Bootstrap 的 bg-* 类内部也用 background-image，且 CSS 优先级容易失控；更重要的是，d-md- 这类显示控制类只管 display，不管背景。
-
bg-gradient-primary和bg-gradient-warning都设置background-image，后者未必生效 - 没有
d-md-bg-gradient-warning这种原生类 —— Bootstrap 5 不生成这类响应式背景工具类 - 强行用
!important会让后续调试和主题切换变得脆弱
如果必须复用 Bootstrap 调色板，就从 Sass 源头编译
如果你的项目已用 Sass 构建，且需要大量响应式渐变，可直接在 _custom.scss 中引用 Bootstrap 的颜色变量，生成带断点的类：
@each $color, $value in $theme-colors {
@each $breakpoint, $media in $grid-breakpoints {
.bg-gradient-#{$color}-#{$breakpoint} {
@include media-breakpoint-up($breakpoint) {
background-image: linear-gradient(135deg, map-get($theme-colors, $color), darken(map-get($theme-colors, $color), 15%));
}
}
}
}
但要注意：这会显著增加 CSS 体积（$theme-colors × $grid-breakpoints 组合），且每个类只对应一个断点起始，不支持“仅在 md 生效”这种区间逻辑。
实际项目里，多数情况只需 2–3 个关键断点的手动媒体查询就够了，不必追求全自动生成。
渐变本身不触发重排，但频繁切换断点时若配色对比度过高，用户眼睛会明显感知跳变 —— 这个细节比代码实现更难调。
