bootstrap 不支持带断点前缀的渐变类，所有 bg-gradient-* 类均为全局静态规则；需用媒体查询手动控制，小屏设 background-color，md+ 覆盖 background-image，并注意深色模式、可访问性及回退逻辑。
Bootstrap 官方不提供任何带断点前缀的渐变类名（比如 md:bg-gradient-primary 或 bg-sm-gradient），所有 bg-gradient-* 类都是全局生效、无媒体查询包裹的静态规则——试图靠类名组合实现“仅在某断点启用渐变”，本质上行不通。
为什么 bg-gradient-primary d-md-block 不等于“md 断点渐变”
这个组合只是让元素在 md 及以上显示，小屏时整个元素被 d-none 隐藏；但渐变本身没被“开关控制”，它始终存在。更关键的是：bg-gradient-primary 必须和 bg-primary 一起用才生效（它只提供 background-image，不定义颜色），而 bg-primary 同样是全局类，不会随断点变化。
-
d-md-block控制的是display，不是background-image - 小屏隐藏后，你看到的是空白，不是“纯色回退”
- 如果父容器有背景、子元素有白色
background-color（如.card），渐变可能根本不可见
怎么用 CSS 媒体查询手动控制渐变断点
这是唯一可靠、可预测的做法：把渐变写进 @media，只改 background-image，不动 background-color。
- 基础态（小屏）先写明确的
background-color，例如.hero { background-color: #fff; } - 再用
@media (min-width: 768px)（严格匹配 Bootstrap 5 的md断点）覆盖background-image - 方向用角度（如
135deg），不用to right，避免 Safari 兼容问题 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000比50%, #000更友好
.hero-section {
background-color: #fff;
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
如何复用断点渐变逻辑（自定义类）
如果多个组件都要“仅 md+ 渐变”，可以定义 bg-md-gradient-primary 这类类名，但要注意权重和回退逻辑。
- 必须加
!important——因为 Bootstrap 的bg-light等类自带!important，你的规则否则会被覆盖 - 使用时顺序很重要：
class="bg-md-gradient-primary bg-white"，自定义类在前，保底色在后 - SCSS 中推荐用
@include media-breakpoint-up(md)，复用$primary变量，避免硬编码颜色值 - 别漏掉小屏的
background-color回退，否则在未命中媒体查询时可能透明或继承意外色值
容易被忽略的深色模式与可访问性细节
渐变一加上，文字对比度常跌破 WCAG 标准，尤其浅色渐变配默认 text-dark；子元素（如 .card）的白色背景也会完全盖住容器渐变。
- 深色模式下，
@media (prefers-color-scheme: dark)必须单独重写渐变色，不能复用亮色系变量 - 文字色要同步调整：
text-white配深渐变，text-dark配浅渐变 - 子元素若需透出背景，得显式设
background-color: rgba(255,255,255,0.9)，而不是默认纯白 - 检查 computed styles 中
background-image是否为none——如果是，大概率被background: #fff这类简写清掉了
