bg-gradient工具类无法响应断点，因其不支持媒体查询；需用css媒体查询手动控制background-image有无，小屏仅设background-color，中屏起在@media中添加background-image。
不能用 bg-gradient 工具类直接“在某个断点关掉渐变”，它一旦加到元素上，就在所有尺寸生效；想实现“仅在 md 及以上有渐变，小屏移除”，必须用 CSS 媒体查询手动控制 background-image 的有无。
为什么 bg-gradient + 断点类（如 d-md-block）无效
d-md-block 只控制 display，不影响背景渲染逻辑；bg-gradient-primary 底层是 background-image: linear-gradient()，而 Bootstrap 的颜色类（如 bg-light）会设置 background-color，它默认盖在渐变图层下方——你看到的其实是纯色，不是渐变没生效。
-
bg-gradient本身不带断点响应能力，Bootstrap 5 完全没提供md:bg-gradient这类写法 - 加
!important到bg-gradient上也无用：它既不控制透明度，也不参与媒体查询判断 - 试图用
bg-gradient-none或类似类？Bootstrap 5 根本没定义这个工具类
用 @media 清空 background-image 实现“移除”
所谓“移除渐变”，本质是让小屏时 background-image 为空，同时保留 background-color 作为视觉回退。关键在于：只在目标断点内声明 background-image，其余情况让它自然为空。
- 小屏（
xs/sm）下不写background-image，只设background-color: #f8f9fa等纯色 - 中屏起（
md及以上）用@media (min-width: 768px)包裹background-image: linear-gradient(...) - 务必避免用
background: linear-gradient()简写——它会把background-color一并重置为transparent，导致小屏无背景色可回退
示例：
.hero-section {
background-color: #ffffff;
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
按钮等组件上移除渐变要额外注意 background-color: transparent
如果目标元素是 <button class="btn btn-primary"></button>，它自带 background-color: #0d6efd !important。即使你用媒体查询清掉了 background-image，那个高优先级的纯色背景仍存在——看起来“渐变没被移除”，其实是它一直盖着。
- 必须显式覆盖：在小屏样式里加
background-color: #fff !important（或你需要的回退色） - 如果按钮原本用了自定义渐变，记得同时清除
:hover、:active状态下的background-image，否则悬停时渐变会突然出现 - 不要依赖
bg-white类去覆盖——它的优先级通常低于.btn-primary的!important，得自己写 CSS 并加!important
真正容易被忽略的是：渐变是否被其他背景属性干扰。比如父容器设置了 background: url(...) no-repeat，子元素的 background-image 就可能被继承或层叠覆盖；移除渐变前，先确认当前元素的 background 层级是否干净。
