Bootstrap 4 不支持断点渐变类，需用媒体查询实现 sm+ 渐变：先设小屏纯色背景，再在 min-width: 576px 时覆盖 background-image；自定义类需注意权重与回退逻辑，并关注文字对比度和子元素遮盖问题。
Bootstrap 4 没有 bg-gradient-sm 这类断点渐变类，所有 bg-gradient 工具类（如 bg-gradient-primary）都是全局生效的，不会随屏幕尺寸变化。想实现“仅在 sm 及以上启用渐变”，必须手动写媒体查询覆盖 background-image。
为什么 bg-gradient-primary d-sm-none d-md-block 不是正确解法
这个组合只是让元素在小屏隐藏、中屏显示，不是“小屏禁用渐变”。它会导致：小屏时整个区域空白；大屏时渐变虽出现，但无法控制渐变本身是否启用——比如你希望小屏用纯色、大屏才渐变，这种写法做不到。更关键的是，bg-gradient-primary 在小屏依然被解析并尝试注入 background-image，只是元素不可见而已。
用 @media (min-width: 576px) 覆盖 background-image
这是最直接、兼容性最好的方式。Bootstrap 4 的 sm 断点值是 576px，必须严格匹配，不能写成 575px 或 580px。
- 先给元素设默认背景色（小屏 fallback）：
.hero { background-color: #f8f9fa; } - 再用媒体查询只在
sm+注入渐变：@media (min-width: 576px) { .hero { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); } } - 方向优先用角度（如
135deg），比to right在旧版 Android WebView 和 iOS 11 以下 Safari 中更稳 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000格式比50%, #000更友好
自定义 bg-sm-gradient-primary 类（适合多处复用）
如果你在多个容器上都要 sm+ 渐变，可以自己定义一个工具类，避免重复写媒体查询。注意权重问题：Bootstrap 4 的 bg-* 类不带 !important，但你的自定义类如果和 bg-light 等混用，仍需确保顺序或加 !important。
- 写法示例（CSS）：
@media (min-width: 576px) { .bg-sm-gradient-primary { background-image: linear-gradient(135deg, #0d6efd, #86b7fe) !important; } } - HTML 中使用：
<div class="bg-sm-gradient-primary bg-light">—— 自定义类在前，保底色类在后 - 别漏掉小屏的
background-color回退逻辑，否则小屏可能透出父级背景 - 如果项目用 Sass，可引用
$grid-breakpoints变量：@include media-breakpoint-up(sm) { ... }
真正容易被忽略的是：渐变一加上，文字对比度常跌破 WCAG 4.5:1 标准，尤其浅色渐变配默认 text-dark 时阳光下几乎不可读；子元素如 .card 默认白色背景会完全盖住容器渐变——得改成 background-color: rgba(255,255,255,0.9) 才能透出一点底层效果。
