<p>Bootstrap 4 的 bg-gradient-* 类不支持响应式断点，必须用 @media 覆盖 background-image 并配 background-color 回退；自定义类需加 !important、注意顺序与可访问性。</p>
Bootstrap 4 的 bg-gradient-* 类本身不响应断点，写 md:bg-gradient-primary 或加 d-md-block 都不能让渐变“只在中屏以上生效”——前者是 Tailwind 写法，Bootstrap 完全不识别；后者只是控制显隐，不是控制渐变逻辑。
为什么 bg-gradient-primary d-sm-none d-md-block 不等于“小屏禁用渐变”
它会让整个元素消失，而不是保留容器、仅关闭渐变。小屏时你看到的是空白，不是回退到纯色背景。真正需要的是：渐变样式本身被断点条件控制，而非靠 display 切换。
-
bg-gradient-primary是一个静态工具类，底层固定为background-image: linear-gradient(135deg, #007bff, #0056b3)，无任何@media包裹 - 它必须和
bg-primary等颜色类搭配才可见效果，但这些类也都不带断点逻辑 - 如果项目里同时用了
bg-light和bg-gradient-primary，bg-light的background-color会盖在渐变下方，导致渐变根本不可见
正确做法：用 @media 覆盖 background-image
这是唯一可靠、可预测的方案。关键在于用媒体查询精确控制 background-image，并确保小屏有明确的 background-color 回退。
- 基础态（如小屏）先写
background-color: #f8f9fa，别留空 - 用
@media (min-width: 768px)（严格匹配 Bootstrap 4 的md断点）覆盖background-image: linear-gradient(...) - 必须用
background-image，不是background——后者会清掉已有background-color或纹理 - 方向优先写角度（如
135deg），比to right兼容性更稳；旧版 Safari 对缩写支持差 - 至少写两个色标，
linear-gradient(135deg, #007bff)是无效语法
自定义带断点前缀的渐变类（适合多处复用）
如果多个组件都要“仅 md+ 渐变”，可以定义类似 bg-md-gradient-primary 的类，避免重复写媒体查询。
- 在 SCSS 中用
@include media-breakpoint-up(md)包裹，引用$primary和$secondary变量，避免硬编码 - 必须加
!important——Bootstrap 的bg-light等类自带!important，你的规则权重不够会失效 - 使用时注意顺序：
class="bg-md-gradient-primary bg-light"，自定义类在前，保底色类在后 - 别漏掉
background-color回退逻辑，否则小屏可能完全透明
渐变一加上，文字对比度常跌破 WCAG 标准；子元素如 .card 默认白色背景会完全盖住容器渐变；深色模式下，prefers-color-scheme: dark 里的渐变色必须单独重写——这些都不是断点问题，而是叠加后的视觉与可访问性断裂点，容易被忽略。
