移动端渐变背景不会自动取消，需用@media (max-width: 767.98px) { body { background-image: none !important; } }精准覆盖，保留background-color作为纯色fallback。
移动端 body 的渐变背景不会“自动取消”，只要 bg-gradient-* 类存在，它就在所有断点生效——包括 xs。所谓“取消”，其实是用 CSS 层叠强制覆盖掉 background-image，同时保留你想要的纯色 fallback。
为什么删掉 bg-gradient 类不现实
模板生成的 HTML 或 CMS 输出常固定携带 bg-gradient-primary，手动删类容易被覆盖或遗漏；更关键的是，即使删了，若其他地方（比如自定义 CSS 或 JS）又注入了 background-image，渐变仍会出现。
-
bg-gradient-primary本身不带断点逻辑，它不是“可开关”的功能，而是静态声明 - 仅靠
d-none d-sm-block这类显示控制类，只是隐藏元素，background-image依然在计算中（哪怕不可见） - 用
background: none会连带清掉background-color，导致 body 透明或继承父级背景，视觉失控
必须用 background-image: none 覆盖
Bootstrap 的渐变本质是 background-image: linear-gradient(...)，所以唯一干净、精准的“取消”方式，就是用媒体查询把它设为 none，且只作用于移动端断点。
- 写法必须是：
background-image: none !important——!important几乎必加，否则 Bootstrap 工具类的权重更高 - 断点值严格用
(max-width: 767.98px)（对应 Bootstrap 5 的sm下限），别写767px或768px - 确保已有
background-color（比如来自bg-light或自定义色），它会自然成为移动端 fallback
@media (max-width: 767.98px) {
body {
background-image: none !important;
}
}
深色模式下容易漏掉的覆盖点
如果项目启用了 prefers-color-scheme: dark，而你只写了上面的媒体查询，那么深色模式 + 小屏时，background-image 仍可能残留（尤其当深色主题 CSS 在后加载）。这时需要叠加一层：
- 单独加
@media (prefers-color-scheme: dark) and (max-width: 767.98px)确保双重条件命中 - 不要依赖
bg-dark类来“修复”——它只设background-color，对已存在的渐变无效 - 检查 computed 样式里
background-image是否真为none，而不是linear-gradient(135deg, ...)仍在
真正起效的关键不在“删什么”，而在“用什么规则、在什么条件下、精准覆盖哪条属性”。移动端渐变消失不是靠移除类，而是靠 CSS 层叠里一次明确的 background-image: none 声明——其它都是干扰项。
