必须用background-image: none显式覆盖才能取消渐变，因bg-gradient-primary d-md-none仅隐藏元素而非禁用渐变，其linear-gradient(135deg,...)在所有断点仍生效；小屏需配合@media (max-width: 767.98px)强制清空并保留background-color回退。
不能靠删类或加 d-md-none 实现“取消渐变”，必须用 background-image: none 显式覆盖，否则小屏仍会渲染 135deg 渐变（哪怕你看不见）。
为什么 bg-gradient-primary d-md-none 不是取消渐变
这个组合只是让整个元素在小屏消失，bg-gradient-primary 的 CSS 规则依然生效，且它的 background-image: linear-gradient(135deg, ...) 在所有断点下都存在。你看到的“没渐变”，其实是元素不可见，不是渐变被禁用。
常见误判现象：小屏时子元素（如 .card、.container）自带白色背景，把父级渐变完全盖住了，你以为渐变“没了”，其实它还在 computed styles 里。
-
bg-gradient-primary是开关+方向+颜色的绑定体，没有“关掉”逻辑 -
d-md-none控制的是display，和background-image层级无关 - 如果用了
bg-light这类带!important的类，你的媒体查询规则权重可能不够，必须加!important
正确做法：用 @media (max-width: 767.98px) 强制清空渐变
Bootstrap 5 的 md 断点起始值是 768px，所以小屏范围是 max-width: 767.98px（避免浮点边界问题）。在这个范围内，只重置 background-image，保留 background-color 作为 fallback。
@media (max-width: 767.98px) {
.hero-section {
background-image: none !important;
}
}
- 必须用
background-image: none，不是background: none——后者会清掉background-color，导致小屏背景透明 -
!important几乎必加，因为bg-gradient-primary的规则权重高，不加容易被忽略 - 确保该元素已有
background-color（比如通过bg-white或自定义色），否则小屏可能空白
如果已用 bg-gradient-primary，怎么安全降级
不要试图在 HTML 中动态删 class（尤其模板渲染场景），直接 CSS 覆盖更稳定。基础样式写在媒体查询外，渐变控制收口在查询内：
.hero-section {
background-color: #f8f9fa; /* 小屏 fallback */
}
<p>@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}</p><p>@media (max-width: 767.98px) {
.hero-section {
background-image: none !important;
}
}</p>
- 小屏态必须显式声明
background-color，不能依赖工具类隐式继承 - 两个媒体查询可以共存：
min-width启用渐变，max-width确保关闭——避免 Safari 等浏览器对768px边界解析不一致 - 若项目支持深色模式，记得加
@media (prefers-color-scheme: dark)单独适配渐变色值
容易被忽略的细节：子元素遮挡和文字对比度
即使你成功关掉了容器渐变，如果里面嵌了 .card、.btn 这类默认带纯白背景的组件，它们仍会挡住底层颜色，造成“渐变消失了”的错觉。
- 检查 computed styles 中
background-image是否真为none，而不是被子元素盖住 - 渐变关闭后，文字颜色是否还匹配新背景？比如浅灰背景上用
text-dark可能对比度不足 - 移动端 Safari 对
to right支持差，但background-image: none没兼容性问题——这点反而最稳
