Bootstrap 5.3+不支持如bg-gradient-sm的断点渐变类，所有bg-gradient类全局生效；实现小屏纯色、大屏渐变需用媒体查询覆盖background-image或组合bg-primary与bg-gradient-primary并配合d-none/d-md-block控制显隐。
Bootstrap断点类怎么和bg-gradient一起用
断点类（如bg-gradient-sm）在bootstrap 5.3+中根本不存在——官方没提供响应式渐变工具类，所有bg-gradient类都是全局生效的，不随屏幕尺寸变化。想实现“小屏纯色、大屏渐变”，必须手动写媒体查询或用javascript切换类。
常见错误是以为写了bg-gradient bg-primary d-sm-none d-md-block就能控制渐变显示，其实d-sm-none只隐藏元素，不会禁用渐变；而bg-gradient一旦存在就始终尝试注入background-image，哪怕元素不可见。
- 真正可行的做法：用
@media (min-width: 576px)包裹自定义渐变CSS，覆盖默认背景 - 或者给元素加两个类：
bg-primary（小屏） +bg-gradient-primary（大屏），再用d-none d-md-block控制后者显隐 - 注意：
bg-gradient-primary本身不带断点，它只是个固定方向（135deg）的预设类，不能拆解成“仅在md以上生效”
如何让渐变在移动端失效、桌面端启用
直接删掉bg-gradient类不现实，尤其当HTML由模板生成时。更稳妥的方式是用CSS层叠覆盖：在移动端强制把background-image设为none，同时保留background-color作为降级。
示例写法：
@media (max-width: 767.98px) {
.responsive-gradient {
background-image: none !important;
}
}
关键点：
- 必须用
background-image: none，而不是background: none——后者会清掉整个背景，包括background-color -
!important几乎必加，否则Bootstrap的bg-gradient规则权重更高 - 如果用了
bg-primary这类颜色类，它设置的background-color会自然成为移动端 fallback
渐变断点适配深色模式时容易漏什么
深色模式下，bg-gradient-primary生成的渐变依然是基于$primary变量的亮色系（比如#0d6efd → #86b7fe），在暗背景上可能对比度过低甚至看不清文字。这不是断点问题，而是颜色逻辑没随模式切换。
解决方案不是靠断点，而是靠@media (prefers-color-scheme: dark)重写渐变值：
@media (prefers-color-scheme: dark) {
.theme-aware-gradient {
background-image: linear-gradient(135deg, #4dabf7, #228be6) !important;
}
}
注意：
- 不要指望
bg-gradient自动适配深色模式——它完全不感知data-bs-theme="dark"或系统偏好 - 如果用的是CSS变量（如
--bs-primary），需确保这些变量在深色模式下已正确重定义，否则bg-primary bg-gradient仍会拉出浅色渐变 - 文字颜色也要同步调整：
text-dark在深色渐变上可能发灰，得换成text-white或用text-opacity微调
为什么用display断点切换渐变总出错
很多人用class="bg-gradient-primary d-md-none d-lg-block"想实现“lg以上显示渐变、md以下隐藏”，结果发现小屏时背景彻底消失——因为d-md-none只是让元素display: none，但bg-gradient-primary仍在DOM里生效，且其background-image声明会干扰父容器或伪元素渲染。
真正要的是“小屏用纯色、大屏用渐变”，不是“小屏隐藏渐变”。所以：
- 别用
d-*-none控制渐变，改用bg-primary（小屏） +bg-gradient-primary（大屏）组合 - 如果必须用显示/隐藏逻辑，确保隐藏的是整个容器，而不是只隐藏渐变类——否则残留的
background-image: none可能被其他样式继承 - 检查computed styles里
background-image是否真的为none，有时候浏览器会把无效渐变值（比如空色值）也解析成none，导致fallback失败
bg-gradient就像一个开关，开了就一直开着，关它得自己动手，Bootstrap不会替你判断“现在是不是该关”。
