bootstrap 5 的 bg-gradient-* 类不支持响应式断点控制，需通过媒体查询单独设置 background-image 实现“仅中屏以上启用渐变”，并注意子元素遮挡和文字对比度问题。
Bootstrap 5 的 bg-gradient-* 类不支持断点响应式控制，直接加 md: 前缀或 d-md-block 都不能让渐变“只在中屏生效”——它要么全局生效，要么你误删了整个元素。
为什么 bg-gradient-primary d-md-block 没用
因为 d-md-block 控制的是 display，不是 background-image。给同一个元素加 bg-gradient-primary d-none d-md-block，小屏时元素被隐藏，大屏才显示；这不是“渐变条件启用”，而是“内容条件显示”。更糟的是，如果父容器有背景，子元素一隐藏，你根本看不出渐变是否该出现。
-
bg-gradient-*类本身没媒体查询包裹，写在哪都生效 -
md:bg-gradient-primary是 Tailwind 写法，Bootstrap 完全不识别 - 若 SCSS 中设了
$enable-gradients: false，所有渐变类静默失效，控制台无报错 - 只写
bg-gradient不配bg-primary等颜色类，它连基础渐变都不会渲染
用 @media 写断点渐变最直接
对目标元素单独写媒体查询，用 background-image 注入渐变，小屏默认回退纯色。这是兼容性最好、逻辑最清晰的做法。
- 断点值必须严格用
768px（对应 Bootstrap 的md），别写767px或770px - 基础样式（小屏）写在媒体查询外：
.hero { background-color: #fff; } - 大屏覆盖只改
background-image：@media (min-width: 768px) { .hero { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); } } - 务必用
background-image，不是background—— 后者会清掉background-color和可能存在的纹理图 - 方向优先写角度（如
135deg），to right在旧版 Safari 里支持不稳定
自定义带断点前缀的渐变类（适合多处复用）
如果项目里多个组件都要“仅 md+ 渐变”，可以定义类似 bg-md-gradient-primary 的类，避免重复写媒体查询。
- SCSS 中用
@include media-breakpoint-up(md)引用官方断点变量，更可靠 - 必须加
!important：Bootstrap 的bg-light等类自带!important，你的自定义规则需同等权重才能覆盖 - 颜色建议复用 Bootstrap 变量：
linear-gradient(135deg, $primary, $secondary) - 使用时注意顺序：
class="bg-md-gradient-primary bg-light"—— 自定义类在前，保底纯色类在后 - 别用
background简写，坚持用background-image+background-color: transparent组合
真正容易被忽略的不是怎么写渐变，而是渐变生效后子元素是否盖住了它——比如 .card 默认有白色背景，会完全遮住底层渐变；还有文字对比度问题，浅渐变配深色文字常低于 WCAG 4.5:1 标准，得手动调 color 和 border。
