<p>Bootstrap 5 的 bg-gradient 类不支持断点前缀，真正响应式渐变需用媒体查询覆盖 background-image；必须搭配 bg-* 类才生效，且需避免 background 简写清空渐变，自定义类需加 !important 并注意顺序。</p>
Bootstrap 5 的 bg-gradient 类本身不支持断点前缀（如 md:bg-gradient-primary），所谓“快速切换”不是靠组合工具类实现的，而是必须用媒体查询覆盖 background-image —— 否则你看到的只是“渐变始终存在”或“整个元素被隐藏”，而非渐变样式本身的响应式切换。
为什么 bg-gradient-primary d-md-none 不是真正的断点切换
它会让元素在小屏消失，但渐变逻辑并未关闭；大屏时 bg-gradient-primary 依然生效，且方向固定为 135deg、颜色绑定 $primary 变量，无法按断点换色或调向。更关键的是：d-md-none 控制 display，和背景渲染无关，子元素若带白色背景（如 .card），还会直接盖掉容器渐变。
- 检查 computed styles：如果
background-image是none，大概率被background: #fff这类简写清掉了 -
bg-gradient单独使用无效，必须搭配至少一个bg-*类（如bg-light）才触发 - 若 SCSS 中设了
$enable-gradients: false，所有渐变类静默失效，控制台无提示
用 @media 直接覆盖 background-image 最可靠
这是唯一能真正让“渐变只在指定断点出现”的方式，且兼容所有 Bootstrap 5 版本（包括 5.3+）。重点在于只动 background-image，不动 background 简写，避免清掉已有 background-color。
- 小屏基础态必须写在媒体查询外：
.hero { background-color: #f8f9fa; } - 中屏起覆盖渐变：
@media (min-width: 768px) { .hero { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); } } - 断点值严格用
768px（对应 Bootstrap 的md），不能是767px或770px - 方向优先写角度（如
90deg表示从左到右），比to right在旧版 Safari 中更稳
自定义带断点前缀的渐变类（适合多处复用）
如果你在多个组件里都要“仅 md+ 启用蓝紫渐变”，可以封装成 bg-md-gradient-primary 这样的类名，避免重复写媒体查询。但它不是 Bootstrap 原生类，需手动补全 CSS，并注意权重问题。
- 必须加
!important：因为bg-light等类自带!important，你的规则否则会被覆盖 - 使用顺序很重要：
class="bg-md-gradient-primary bg-light"，自定义类在前，保底色在后 - SCSS 中推荐用
@include media-breakpoint-up(md)，引用$primary和$secondary变量，避免硬编码色值 - 深色模式下需额外加
@media (prefers-color-scheme: dark)重写渐变色，否则用户切主题后仍看到亮色渐变
真正容易被忽略的点是：渐变一加上，文字对比度常跌破 WCAG 标准；子元素默认纯白背景会完全遮挡容器渐变；而透明度控制必须用 rgba() 写在颜色值里，不能靠 opacity——后者会让文字一起变淡。
