必须用background-image: none覆盖生效的渐变，而非删类或加d-none；需通过开发者工具定位来源，匹配媒体查询与深色模式，确保选择器权重足够且子元素不遮挡。
不能靠删掉 bg-gradient 类或加 d-none 来“取消”渐变——它可能已被父容器、全局样式或媒体查询注入，真正生效的渐变往往藏在 background-image 里。必须定位并覆盖该属性。
查清渐变从哪来
先打开浏览器开发者工具，选中目标元素，看 Computed 面板里的 background-image 值是不是 linear-gradient(...)。如果不是 none，说明渐变正在生效。接着在 Styles 面板里逐条点开 CSS 规则，重点找：
- 带
@media的自定义规则（比如@media (min-width: 768px) { .hero { background-image: ... } }） - Bootstrap 工具类如
bg-gradient-primary（它本身会设background-image） - 全局 SCSS 中通过
$enable-gradients: true启用后生成的批量规则
用 background-image: none 强制关闭
找到来源后，在当前页面的 <style></style> 或独立 CSS 文件里写针对性覆盖规则。关键点：
- 必须用
background-image: none，不是background: none——后者会清掉background-color，导致背景变透明或露白 - 选择器权重要够：如果原规则是
.hero-section，你写.hero-section.no-gradient就更稳；必要时加!important，但优先提升选择器精度 - 断点要匹配：如果原渐变只在
md+生效，你得在相同断点里关掉它：@media (min-width: 768px) { .hero-section.no-gradient { background-image: none; } }
避免子元素遮挡导致“以为没生效”
有时你关掉了容器渐变，但页面仍像有渐变效果——大概率是子元素（比如 .card、.container）自带白色背景，盖住了容器底色。这时需同步处理：
- 确认容器本身已无
background-image，且background-color是你想要的纯色（如#f8f9fa） - 检查子元素是否用了
bg-white或bg-light；若不需要，删掉或改用bg-transparent - 如果子元素必须保留背景，可降级为半透：
background-color: rgba(255, 255, 255, 0.95)，让底层颜色微微透出
深色模式下容易漏掉的覆盖点
如果项目启用了 prefers-color-scheme: dark，而你只在亮色模式下关了渐变，暗色模式里可能还残留着基于 $primary 的渐变。务必补上：
@media (prefers-color-scheme: dark) {
.hero-section.no-gradient {
background-image: none;
}
}
更稳妥的做法是把深色模式查询嵌套进断点里，比如：@media (min-width: 768px) and (prefers-color-scheme: dark)。否则在暗色系统 + 小屏设备上，你关掉的只是亮色分支，暗色分支依然在运行。
