应使用@media (max-width: 575.98px) { .responsive-bg { background-image: none !important; } }强制清空渐变图层，保留background-color降级，同时需额外适配prefers-color-scheme深色模式。
直接删掉 bg-gradient 类不现实，尤其当 HTML 由模板或 CMS 渲染时；真正可靠的做法是用 CSS 媒体查询强制清空 background-image，同时保留 background-color 作为降级。
为什么 bg-gradient-primary d-sm-none 不等于“手机端取消渐变”
因为 d-sm-none 只让元素不可见，但 bg-gradient-primary 依然在 DOM 中生效——它注入的 background-image: linear-gradient(...) 并未被移除。小屏时你看到的是“空白”，不是“纯色背景”。更糟的是，如果父容器有 background-color，它可能被渐变图层遮住，导致视觉错乱。
-
bg-gradient-*是全局类，无断点逻辑，写上就生效，和屏幕尺寸无关 -
d-*控制显示/隐藏，不是样式开关 - 想“取消渐变”，必须覆盖或重置
background-image，不是隐藏元素
用 @media 强制清空渐变图层（推荐）
这是最轻量、兼容性最好、且不依赖 JS 的方案。关键在于：只清 background-image，不动 background-color，让它自然 fallback。
- 必须用
background-image: none !important——background: none会一并清掉颜色，导致背景变透明甚至白屏 - 断点值要严格匹配 Bootstrap 5 的
sm：用(max-width: 575.98px)，不是576px或767px - 加
!important几乎是必须的，否则 Bootstrap 的bg-gradient-*权重更高，你的规则会被忽略
@media (max-width: 575.98px) {
.responsive-bg {
background-image: none !important;
}
}
使用时：<div class="responsive-bg bg-gradient-primary bg-white">。注意顺序：<code>bg-white 在后，确保小屏 fallback 颜色生效。
如果用了深色模式，别漏掉 prefers-color-scheme
上面的媒体查询只管屏幕尺寸，不管系统主题。如果你的渐变在暗色模式下对比度崩坏（比如浅蓝渐变配黑底），那光关掉渐变还不够——得同步适配颜色逻辑。
- 深色模式下，
bg-gradient-primary仍生成亮色系渐变（如#0d6efd → #86b7fe），文字可能完全不可读 - 需额外加一层媒体查询：
@media (prefers-color-scheme: dark)，重写background-image为深色系渐变，或直接设为none - 若同时要响应式 + 深色模式，两个媒体查询需叠加，不能合并——CSS 不支持
@media (max-width: ...) and (prefers-color-scheme: dark)在所有浏览器中稳定生效
真正容易被忽略的点是：渐变失效 ≠ 背景消失。你得确认小屏下看到的是预期的纯色，而不是意外透出父级背景、或文字因对比度不足而发灰——这要求你始终把 background-color 显式写在类里，而不是指望渐变类自动带颜色。
