必须用 background-image: none 显式清除渐变，因 d-sm-none 仅隐藏元素而不移除渐变样式，且 js 动态显示时渐变会复现；媒体查询中需严格匹配 575.98px 断点并加 !important 覆盖 bootstrap 高优先级规则。
不能靠删类或加 d-none 实现“取消渐变”，必须用 background-image: none 显式覆盖，否则渐变仍存在于计算样式中，只是被其他背景遮住而已。
为什么 bg-gradient-primary d-sm-none 不等于“取消渐变”
这个组合只是让元素在小屏不可见，bg-gradient-primary 本身仍在生效——它设置的 background-image 没被清除。一旦你移除 d-sm-none，渐变立刻出现；更隐蔽的问题是：如果该元素被 JS 动态显示（比如模态框、下拉菜单），渐变会意外复现。
-
bg-gradient-*类只控制background-image，不控制显隐 -
d-sm-none控制的是display，和背景渲染完全无关 - 真正需要的是“渐变样式条件性失效”，不是“元素条件性隐藏”
用媒体查询强制清空 background-image
最直接有效的方式是在小屏断点下把渐变设为 none，同时保留原有背景色作为 fallback。注意断点值必须严格匹配 Bootstrap 5 的 sm：576px（不是 575px 或 577px）。
- 写法必须是
background-image: none，不是background: none——后者会清掉整个背景，包括background-color - 若目标元素用了
bg-light等类，它们自带!important，你的规则也得加!important才能覆盖 - 示例 CSS：
@media (max-width: 575.98px) {
.has-responsive-gradient {
background-image: none !important;
}
}
HTML 中：<div class="has-responsive-gradient bg-light bg-gradient-primary">。小屏时渐变消失，<code>bg-light 的白色背景自然生效。
全局批量禁用所有渐变的快捷方式
如果你的项目里大量使用了 bg-gradient-* 类，又想在某断点下统一关闭，可以写一条高权重的通配规则：
- 选择器要足够具体，比如
.container .bg-gradient-*, .row .bg-gradient-*，避免误伤第三方组件 - 必须加
!important，因为 Bootstrap 的渐变类优先级高于普通类 - 不要试图用
[class*="bg-gradient"]，它会匹配到含子串的所有类名（比如bg-gradient-primary-hover），且兼容性差
真正容易被忽略的一点是：渐变关闭后，文字对比度可能骤降——比如原本深色渐变配 text-white，关掉后变成纯白背景+白字。记得同步检查小屏下的文字颜色是否仍可读。
