Bootstrap的bg-gradient类无断点前缀，不响应媒体查询；需自定义带断点的渐变类（如bg-md-gradient-primary）并用background-image注入，加!important覆盖默认样式，避免用background简写。
断点下渐变背景失效，是因为 bg-gradient 不响应媒体查询
bootstrap 的 bg-gradient 类本身不带断点前缀，它和 bg-primary 这类颜色类一样，是静态工具类——没有 md:bg-gradient 或 lg:bg-gradient-primary 这种写法。你写 bg-gradient bg-primary d-md-none，只是把整个元素隐藏了，渐变自然也没了。
真正想“只在中屏显示渐变背景”，必须让渐变逻辑本身被断点控制，而不是靠 display 隐藏元素。
- 别用
d-md-none+bg-gradient：这是隐藏容器，不是条件启用渐变 - 别试图重写
@media (max-width: 767.98px) { .bg-primary { ... } }：Bootstrap 的.bg-primary规则权重高且无媒体查询包裹，你的规则会被忽略 - 检查是否引入了完整 CSS：精简版或 SCSS 中设了
$enable-gradients: false，bg-gradient就完全不生效（静默失败）
正确做法：用带断点前缀的自定义渐变类
Bootstrap 不提供断点渐变类，但你可以自己补。推荐在项目 SCSS 或全局 CSS 中定义类似 bg-md-gradient-primary 的类，只在对应断点内注入 background-image：
@include media-breakpoint-up(md) {
.bg-md-gradient-primary {
background-image: linear-gradient(135deg, #0d6efd, #86b7fe) !important;
}
}
关键点：
- 必须用
background-image（不是background），避免清掉原有background-color降级逻辑 - 加
!important：对抗 Bootstrap 默认样式权重 - 方向用标准语法如
135deg或to right，别用to-r（Bootstrap 5 不支持） - 颜色至少两个，否则仍是纯色
更轻量方案：直接对容器写媒体查询
如果只在某几个地方用，比造一堆类更省事。例如给 hero 区域加断点渐变：
@media (min-width: 992px) {
.hero-section {
background-image: linear-gradient(to bottom, #004d40, #00796b) !important;
}
}
注意：
- 别写
background: linear-gradient(...)：会覆盖掉可能存在的background-color和background-image其他值（比如图片纹理） - 移动端 Safari 对 color-stop 格式敏感，写
50% #000比50%, #000更稳妥 - 如果用了深色模式，记得在
@media (prefers-color-scheme: dark)里单独适配渐变色，否则浅色渐变在暗背景下文字可能不可读
按钮/警示框等组件里加断点渐变要额外小心
像 .btn 或 .alert 这类组件，内部状态（:hover、:disabled、.alert-dismissible 关闭按钮）依赖原生背景逻辑。直接套断点类容易出问题：
- 按钮必须同时覆盖
background-color: transparent !important和background-image，否则:hover仍走纯色逻辑 - 警示框要用
background（不是background-color）+!important才能压过 Bootstrap 的锁死声明 - 渐变后文字对比度大概率跌破 4.5:1，尤其浅色渐变配默认
text-dark——得同步改color和border-color
断点渐变最难的不是写 CSS，而是确认它在各种状态（悬停、禁用、深色模式、移动端缩放）下都还看得清。别只测“页面加载完那一刻”。
