Bootstrap的bg-gradient类不支持断点响应式控制，必须通过媒体查询手动设置background-image实现“仅md及以上启用渐变”，同时确保小屏有background-color回退。
直接加 bg-gradient 类却没效果，大概率不是 CDN 挂了或版本错了，而是你误用了渐变类的生效前提——它根本就不是为“响应式开关”设计的。
为什么 bg-gradient-primary d-md-block 看起来像失效了
这个组合本身没报错，但它干的是两件事：一个是渲染渐变，一个是控制显隐。小屏下元素被 d-none 或未匹配断点类隐藏了，你以为“渐变关了”，其实是“整个容器没了”。真正的响应式渐变，得让样式本身随断点变化，而不是靠显示/隐藏来模拟。
-
bg-gradient-*类默认全局生效，Bootstrap 5 不支持md:bg-gradient-primary这种 Tailwind 风格前缀 - 单独写
bg-gradient-primary但没配bg-*类（比如bg-white），它会静默失败——因为该类依赖基础背景色注入background-image - 如果项目 SCSS 中设了
$enable-gradients: false，所有渐变类都会被编译掉，控制台不报错，也查不到原因
怎么用媒体查询真正实现“仅 md 及以上启用渐变”
最稳的方式是绕过工具类，手写 @media 控制 background-image。别碰 background 简写，否则容易清掉已有纹理或 fallback 色。
- 基础态（小屏）必须先写：
.section { background-color: #fff; }，否则大屏媒体查询可能继承不到 fallback - 断点值严格用
768px（Bootstrap 5 的md定义），别写767px或770px - 方向优先用角度：
linear-gradient(135deg, #0d6efd, #6f42c1)，比to right bottom兼容性更可靠 - 颜色至少两个值，单色写法（如
linear-gradient(#0d6efd, #0d6efd)）在部分安卓 WebView 下仍会被当纯色处理
btn 上加渐变为啥死活不显示
不是 CSS 写错了，是 Bootstrap 的 .btn 类用 !important 锁死了 background-color，还预设了 :hover、:active、:disabled 状态样式，bg-gradient 根本插不进去。
- 别写
class="btn btn-primary bg-gradient"——纯色背景会盖掉渐变 - 必须显式覆盖：
background-color: transparent !important+background-image: linear-gradient(...) !important -
:hover和:active必须单独定义，否则悬停时退成透明底，按钮“消失” - iOS Safari 对
background-image在:active下渲染有缺陷，得手动写.btn-gradient:active，哪怕和 hover 一样
最容易被忽略的细节：文字可读性与深色模式
同一组渐变，在 sm 屏上看着对比度刚好，到了 xl 屏因字体相对变小、环境光变化，立刻变得难读。这不是错觉，是真实存在的可访问性断层。
- 浅渐变（如
#f8f9fa → #e9ecef）配text-dark，深渐变（如#0d6efd → #6f42c1）配text-white，别信肉眼判断 - 如果启用了深色模式，
@media (prefers-color-scheme: dark)必须单独适配渐变色值，不能指望自动反转 - 移动端点击反馈弱？加
-webkit-tap-highlight-color: transparent，否则半透明蒙层会盖住渐变
