应使用媒体查询将移动端 background-image 设为 none 并保留 background-color；因 d-sm-none 会隐藏整个元素，而渐变本质是 background-image，需层叠覆盖而非删类或隐藏，深色模式下还需额外适配。
移动端关闭线性渐变背景，不能靠删类或加 d-none，必须用 CSS 层叠覆盖 background-image 并保留降级色——否则小屏会变透明或白屏。
为什么 bg-gradient-primary d-sm-none 不行
这个组合只是把元素整个隐藏了，不是“关掉渐变”。而且一旦用了 d-sm-none，小屏连背景色、文字、边框全都没了。更麻烦的是，如果该元素是导航栏或按钮，隐藏后交互逻辑就断了。真正要关的是渐变图层本身，不是元素显隐。
正确做法：用媒体查询强制清空 background-image
关键不是删类，而是让渐变在小屏下不渲染。Bootstrap 的渐变本质是 background-image，所以只需在移动端把它设为 none，同时依赖已有的 background-color（比如 bg-primary 提供的）作为 fallback。
@media (max-width: 767.98px) { .my-gradient-element { background-image: none !important; } }- 必须加
!important，否则 Bootstrap 的bg-gradient-*规则权重更高，覆盖失败 - 不要写
background: none，它会清掉整个背景（包括background-color），导致小屏背景消失 - 确保该元素已带一个
bg-*类（如bg-light或bg-primary），否则小屏只剩透明
深色模式下还要额外处理
如果页面启用了 prefers-color-scheme: dark，上面的媒体查询只管屏幕尺寸，不管主题。深色模式下渐变色可能依然亮得刺眼，甚至文字看不清。这时候得补一层：
@media (prefers-color-scheme: dark) and (max-width: 767.98px) { .my-gradient-element { background-image: none !important; } }- 或者更稳妥：直接在深色模式媒体查询里重写整条
background，用纯色替代渐变 - 别指望
bg-gradient-dark能自动适配——它和bg-gradient-primary一样，只是固定色值的预设，不会随系统主题动态切换
最易被忽略的一点：渐变是否生效，最终得看浏览器开发者工具里 Computed 面板中的 background-image 值。如果它是 none，但背景还是不对，说明 background-color 没落到位——检查你有没有漏掉基础色类，或者有没有其他样式意外清掉了它。
