bootstrap 5 不支持断点渐变类，bg-gradient-sm等写法无效；禁用渐变需用媒体查询覆盖background-image: none !important，启用则应直接在对应断点写background-image。
bg-gradient 类在 Bootstrap 5 中根本不存在“断点渐变”——它压根就不响应断点，所有渐变类（如 bg-gradient-primary）都是全局生效的。所谓“禁用断点渐变”，其实是误读了需求：你真正要做的，是让渐变只在特定断点出现，或彻底不让它在小屏生效。
为什么 bg-gradient-sm 这类写法完全无效
Bootstrap 5.3+ 官方 CSS 中**没有定义任何带断点前缀的渐变类**，bg-gradient-sm、md:bg-gradient-primary 都是 Tailwind 的语法，Bootstrap 不识别、不编译、不生成对应规则。浏览器直接忽略这类 class，控制台也不会报错。
常见错误现象：
- 写了
bg-gradient-primary d-sm-none d-md-block，结果小屏时整个元素消失，不是“渐变关闭”，而是“内容被隐藏” - 以为加了
d-none d-lg-block就能控制渐变开关，但bg-gradient-primary本身仍在小屏 DOM 上，background-image属性照常渲染（只是被父容器或子元素盖住） - 在 Sass 中设了
$enable-gradients: false，导致所有渐变类静默失效，且无任何警告提示
真正有效的全局禁用方式：CSS 层叠覆盖
最轻量、最可靠的做法，是用媒体查询把小屏的 background-image 强制清空，同时保留 background-color 作为降级色。关键不是“删类”，而是“覆盖样式”。
示例：让所有带 bg-gradient-primary 的元素在 ≤767.98px 下退化为纯色背景
@media (max-width: 767.98px) {
.bg-gradient-primary {
background-image: none !important;
}
}
注意要点：
- 必须用
background-image: none，不是background: none——后者会一并清除background-color，导致背景变透明 -
!important几乎必加，因为 Bootstrap 的bg-gradient-primary规则权重高（含!important） - 该规则需放在
bootstrap.min.css之后引入，否则不生效 - 如果用了深色模式，还需额外加
@media (prefers-color-scheme: dark)单独适配渐变色值
进阶控制：只在某断点启用渐变（而非“禁用”）
如果你实际想要的是“仅 md 及以上才有渐变”，那就别碰 bg-gradient-* 工具类，直接写目标断点的 background-image：
.hero-section {
background-color: #fff; /* 小屏 fallback */
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
这样更可控，也避免了工具类的隐式依赖。断点值必须严格用 768px（Bootstrap 5 的 md 起点），不能写成 767px 或 770px。
最容易被忽略的一点：渐变方向优先用角度（如 135deg），不用 to right——旧版 Safari 对后者支持极差，且部分安卓 WebView 会渲染异常。颜色至少两个色标，否则仍是纯色；移动端 Safari 对 50%, #000 这种 color-stop 格式敏感，建议写成 50% #000。
