Bootstrap原生不支持断点响应式渐变，bg-gradient类全局生效；正确做法是用@media(min-width:768px)覆盖background-image，小屏设background-color回退，方向用135deg、颜色至少两个，并注意文字对比度与深色模式适配。
Bootstrap 原生不支持断点响应式渐变类，bg-gradient-primary 这类工具类在所有尺寸下都生效，加 md:bg-gradient-primary 或 d-md-none 都不能真正让“渐变只在中屏起效”——前者是 Tailwind 语法，后者只是隐藏元素，不是关闭渐变。
为什么直接加断点前缀或显隐类不管用
常见误操作包括：bg-gradient-primary d-md-block、md:bg-gradient-primary、bg-gradient-primary d-none d-md-block。这些写法的问题在于：
-
bg-gradient-primary是无媒体查询的全局 CSS 规则，一旦存在，小屏也会尝试渲染background-image: linear-gradient(...) -
d-md-block控制的是display，不是渐变开关；小屏时元素可见，但渐变可能被子元素（如.card）的纯色背景盖住 -
d-none d-md-block会让小屏内容完全消失，不是“渐变回退”，而是“整个区块消失” -
md:bg-gradient-primary在 Bootstrap 中根本不会生成任何 CSS，浏览器直接忽略
正确做法：用 @media 精确控制 background-image
最轻量、最可靠的方式是绕过工具类，直接对目标选择器写媒体查询，并仅修改 background-image。关键点：
- 基础态（小屏）必须先写
background-color，例如.hero { background-color: #fff; } - 再用
@media (min-width: 768px)覆盖background-image，值为linear-gradient(135deg, #0d6efd, #6f42c1) - 务必用
background-image，不是background或background-color—— 后者会清掉已有背景逻辑 - 方向优先写角度（如
135deg），比to right兼容性更稳，尤其在旧版 Safari 中 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000比50%, #000更友好
自定义带断点前缀的渐变类（适合多处复用）
如果多个容器都需要“仅在 md 及以上启用渐变”，可定义类似 bg-md-gradient-primary 的类。注意：
- 它不是 Bootstrap 原生类，需手动补全，且必须加
!important—— 因为bg-light等类自带!important，你的规则权重不够会失效 - 使用时 class 顺序很重要：
class="bg-md-gradient-primary bg-white"，自定义类在前，保底色类在后 - SCSS 中推荐复用断点变量：
@include media-breakpoint-up(md) { ... }，避免硬编码768px - 别漏掉深色模式适配：
@media (prefers-color-scheme: dark)需单独重写渐变色，否则用户切深色主题后仍看到亮色渐变
容易被忽略的兼容性和可访问性细节
渐变一加上，文字对比度常跌破 WCAG 4.5:1 标准，尤其浅色渐变配默认 text-dark 时阳光下几乎不可读。这不是样式没生效，而是可访问性断裂：
- 必须同步调文字色：
text-white配深渐变，text-dark配浅渐变 - 子元素如
.card默认有白色背景，会完全盖住容器渐变 —— 改成background-color: rgba(255,255,255,0.9)留透出空间 - 方向值写
135deg比to-b安全，旧版 Safari 不认缩写 - 若用了
opacity实现透明效果，会导致文字和图标一起变淡 —— 真正需要的是背景层透明，只能靠rgba()色值或渐变内嵌透明色
