bootstrap 4 不支持响应式断点渐变类，必须用@media手动控制background-image；小屏设background-color回退，中屏起（≥768px）用linear-gradient覆盖，注意兼容性前缀及子元素遮挡问题。
Bootstrap 4 没有响应式断点渐变类，别硬套 bg-gradient-primary d-md-block
Bootstrap 4 官方 CSS 中压根不存在 md:bg-gradient-primary 或 bg-md-gradient 这类带断点前缀的渐变工具类——它不支持 Tailwind 风格的响应式工具类语法，所有类似写法都会静默失效。你看到的 d-md-block 只控制显隐，不是渐变开关；bg-gradient-primary 本身又必须搭配 bg-primary 才能生效，单独用或拼错顺序（比如 bg-gradient-primary bg-white）都会回退为纯白背景。
真正生效的断点渐变只能靠 @media + background-image
要让渐变只在某个断点（如 ≥768px）出现，必须手动写媒体查询，并用 background-image: linear-gradient() 注入，不能依赖任何 Bootstrap 工具类。关键点：
-
background-image是唯一能承载渐变的属性，background-color不接受linear-gradient()函数 - 务必把 fallback 色写在
background-image前面：background-color: #fff;，否则旧 Safari 或邮件客户端里会透底 - 方向统一用
to right或角度（如135deg），避免left to right这种已废弃写法 - 断点值必须严格匹配 Bootstrap 4 的
md：768px（不是 767px 或 770px）
示例（仅在 md 及以上启用蓝紫渐变，小屏纯白）：
.hero-banner {
background-color: #fff;
}
@media (min-width: 768px) {
.hero-banner {
background-image: linear-gradient(135deg, #007bff, #6f42c1);
}
}
常见兼容性翻车点：Safari 旧版、微信 X5 内核、IE11
这些环境不认标准 linear-gradient()，必须加前缀且顺序不能错：
-
-webkit-linear-gradient(to right, #007bff, #6f42c1)放最前面（Safari 5.1–6.0 只认这个） -
-moz-linear-gradient和-o-linear-gradient次之（虽现代已不用，但留着保底） - 标准
linear-gradient()放最后 - 颜色推荐用十六进制或
rgba()，别用命名色（如blue），不同内核解析差异大
完整兼容写法：
.hero-banner {
background-color: #fff;
background-image: -webkit-linear-gradient(to right, #007bff, #6f42c1);
background-image: -moz-linear-gradient(to right, #007bff, #6f42c1);
background-image: -o-linear-gradient(to right, #007bff, #6f42c1);
background-image: linear-gradient(to right, #007bff, #6f42c1);
}
子元素盖住渐变？不是渐变没生效，是它被遮了
渐变背景“看不见”，90% 是因为子元素（比如 .card、.alert、甚至一个 <div>）自带不透明背景色，把底层渐变全挡住了。排查重点：
<ul>
<li>检查子元素是否写了 <code>background-color: white 或 bg-white —— 改成 background-color: rgba(255,255,255,0.95) 留点透出空间
.row 上：它默认有负外边距，实际渲染区域比视觉窄，渐变容易被裁掉overflow: hidden 且子项超出容器，导致渐变边缘被切z-index 对无定位元素无效，别指望靠它“提层”真正起效的解法，永远是调低子元素背景的 opacity，而不是给父容器加 z-index 或拼命提高选择器权重。
最易被忽略的是：Bootstrap 4 默认禁用 $enable-gradients: true，但如果你项目用了自定义 Sass 编译且手动关了它（$enable-gradients: false），所有 bg-gradient-* 类会彻底消失，控制台还不会报错——得去查编译后的 CSS 文件里有没有生成对应规则。
