bootstrap 4 的 bg-gradient 类不响应断点，必须用媒体查询手动覆盖 background-image 实现响应式渐变：小屏设 background-color 回退，大屏（如 ≥992px）用 @media 设置 background-image: linear-gradient(135deg, #007bff, #6f42c1)，禁用 background 简写以防清空背景色。
Bootstrap 4 的 bg-gradient 类无法按断点关闭
Bootstrap 4 的 bg-gradient 及其配套类（如 bg-gradient-primary）是全局生效的，没有内置的 md:bg-gradient-none 或 d-lg-none 这类“渐变开关”。加 d-sm-none d-md-block 只是隐藏/显示整个元素，不是“取消渐变”，小屏时连内容都没了。
真正要的是：大屏有渐变，小屏退回到纯色背景 —— 这必须靠 CSS 媒体查询手动覆盖 background-image。
用 @media 覆盖 background-image 是最稳方案
渐变本质是 background-image: linear-gradient()，而 Bootstrap 4 默认不设 background-color（或设为透明），所以小屏下若不清空它，会残留渐变。正确做法是显式重置：
- 先给元素一个基础背景色（如
bg-light或自定义background-color） - 再在媒体查询里只对目标断点设置
background-image，其他尺寸让它自然回退 - 务必用
background-image单独覆盖，别用background简写，否则可能清掉你设的background-color
示例：仅在 ≥992px（lg）启用蓝紫渐变，小屏保持浅灰背景
.hero {
background-color: #f8f9fa;
}
@media (min-width: 992px) {
.hero {
background-image: linear-gradient(135deg, #007bff, #6f42c1);
}
}
注意：Bootstrap 4 的 lg 断点是 992px，不是 991 或 993；角度写法 135deg 比 to right 兼容性更好。
为什么不能靠删 class 或 JS 切换来“取消”
动态操作 DOM 类看似灵活，但在 Bootstrap 4 下容易出问题：
-
removeClass('bg-gradient-primary')不起作用 —— 因为该类内部依赖background-image，且可能被其他样式覆盖 - 监听
resize切换类，在快速拖拽窗口时易抖动、漏触发，移动端更不可靠 - 如果元素同时用了
bg-dark和bg-gradient，删掉后者不会恢复原背景色，bg-dark自身不含渐变逻辑
除非业务强依赖运行时判断（比如根据用户偏好开关渐变），否则纯 CSS 媒体查询更轻量、可预测、无 JS 依赖。
容易忽略的兼容与细节
几个上线前必查点：
- 检查 SCSS 配置：若项目自定义编译 Bootstrap，确认
$enable-gradients: true（默认为 true，但有人会关） - 移动端 Safari 对
linear-gradient(135deg, ...)支持良好，但避免写50%, #000，改用50% #000（逗号易引发解析失败） - 如果用了深色模式，需额外加
@media (prefers-color-scheme: dark)单独配一套暗色渐变，否则浅色渐变在黑底上文字可能看不清 - 按钮、卡片等组件加渐变后，
:hover或:disabled状态可能失效 —— 因为 Bootstrap 4 的交互态样式常基于background-color，而你的background-image会遮住它
渐变不是开关，是图像层；取消它，得亲手把它“擦掉”，而不是指望框架替你收走。
