bootstrap 5 的 bg-gradient 类不支持断点响应式开关，必须用 @media 强制设 background-image: none !important 来禁用小屏渐变，同时保留 background-color 降级色。
Bootstrap 5 的 bg-gradient 类无法在 lg 以上“取消”——它压根不支持条件启用/禁用，所有渐变类全局生效，必须手动覆盖。
为什么 bg-gradient 在 lg 断点下不能直接“关掉”
你写的 bg-gradient-primary d-lg-none 不起作用，因为 d-lg-none 只隐藏元素本身，而 bg-gradient-primary 注入的 background-image 属性仍存在；哪怕元素不可见，CSS 规则依然加载。更关键的是：bg-gradient-* 类没有媒体查询包裹，Bootstrap 官方 CSS 里根本没提供断点响应式渐变开关。
-
bg-gradient-primary固定使用135deg方向，且无@media包裹 - 它的 CSS 权重高（带
!important），普通样式很难覆盖 - 删掉 class 不现实——模板生成或 JS 动态添加时难以精准控制
正确做法：用 @media 强制清空 background-image（仅 lg 以下）
目标是“lg 以上有渐变，lg 以下无渐变、回退纯色”。核心不是“关掉渐变”，而是“在小屏把渐变干掉，让 background-color 显出来”。
- 先确保元素有基础背景色，比如加
bg-light或bg-white - 在
@media (max-width: 991.98px)中把background-image设为none，并加!important - 千万别写
background: none——它会连background-color一起清掉
@media (max-width: 991.98px) {
.lg-only-gradient {
background-image: none !important;
}
}
HTML 中：<div class="lg-only-gradient bg-light bg-gradient-primary">。注意顺序：自定义类在前，保证媒体查询能命中。<h3>如果要复用，建议定义带断点前缀的工具类</h3>
<p>比如多个组件都要“只在 lg+ 显示渐变”，可以统一定义 <code>bg-lg-gradient 类，避免重复写媒体查询。
- 用
@include media-breakpoint-up(lg)（Sass）或硬写@media (min-width: 992px) - 必须加
!important，否则被 Bootstrap 原生bg-gradient-*覆盖 - 颜色和方向建议用变量（如
$primary,$secondary），方便主题同步 - 方向优先用角度（
90deg）而非to right，兼容旧版 Safari
@media (min-width: 992px) {
.bg-lg-gradient {
background-image: linear-gradient(90deg, #0d6efd, #6f42c1) !important;
}
}
使用：<div class="bg-lg-gradient bg-white">。这里 <code>bg-white 是降级色，必须保留。
最容易被忽略的一点：渐变是否随深色模式切换？bg-gradient-primary 永远基于亮色系 $primary，暗色模式下可能文字看不清——这跟断点无关，但常在你调好 lg 逻辑后突然暴露出来。
