应使用媒体查询将移动端 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 没落到位——检查你有没有漏掉基础色类,或者有没有其他样式意外清掉了它。


















