Bootstrap 4 不支持 bg-gradient 类，必须手写 background-image: linear-gradient() 并加 !important；按钮需先设 background-color: transparent !important 再注入渐变，响应式需用 @media 手动控制。
直接加 bg-gradient 类无效，因为 Bootstrap 4 完全没提供这个工具类——它只在 5.3+ 版本中引入。想在 4 里实现渐变，必须手写 background-image: linear-gradient() 并手动处理权重、覆盖和回退。
Bootstrap 4 根本没有 bg-gradient 类
这是最常踩的坑：看到别人用 bg-gradient-primary 就照抄，结果完全不生效。Bootstrap 4 的 CSS 文件里压根不存在任何以 bg-gradient 开头的类名。它的渐变支持是零，所有相关文档若没注明版本，大概率讲的是 5.x。检查你引入的 CSS 文件名或 bootstrap.min.css 内容，搜 linear-gradient，基本为空——这就是确认依据。
手写 background-image 是唯一可靠方式
Bootstrap 4 的按钮、卡片、导航栏等组件默认靠 background-color 渲染背景，而 background-image 是空的，所以你可以安全注入，只要确保它不被覆盖：
- 必须用
background-image，不是background简写——后者会清掉background-color，导致:disabled或.btn-outline-*状态异常 - 务必加
!important：Bootstrap 4 的.btn、.alert等类大量使用!important锁定颜色，不加就输 - 方向推荐用角度（如
135deg），比to right兼容性更稳；旧版 Android WebView 和 iOS Safari 对to语法支持差 - 至少写两个颜色值，否则仍是纯色：例如
linear-gradient(135deg, #0d6efd, #6f42c1)
按钮上渐变要额外解除 background-color 锁定
.btn 类用 background-color: #007bff !important 强制覆盖一切，光写 background-image 没用：
立即学习“前端免费学习笔记（深入）”；
- 先加
background-color: transparent !important，把原生纯色底“挖掉” - 再叠加
background-image: linear-gradient(...) !important - 保留边框：比如
border: 1px solid rgba(13, 110, 237, 0.3)，否则按钮视觉上会“消失” - 单独定义
:hover和:active状态，否则悬停时变透明底
响应式渐变得靠媒体查询，不能依赖断点类
Bootstrap 4 没有 md:bg-gradient 这种东西，所有断点控制必须手写 @media：
- 小屏用纯色：
.hero { background-color: #f8f9fa; } - 中屏起换渐变：
@media (min-width: 768px) { .hero { background-image: linear-gradient(135deg, #0d6efd, #6f42c1) !important; } } - 注意顺序：自定义类必须放在
bg-*类前面，例如class="hero-bg bg-light"，否则bg-light的!important会盖掉你的渐变 - 文字对比度容易崩：浅渐变配
text-dark常不可读，阳光下尤其明显，得同步调文字色或加text-shadow
最麻烦的不是写法，而是每次改渐变都要同步检查按钮状态、文字可读性、移动端点击反馈、深色模式适配——这些都不是“加个类”能解决的，得一个个补 CSS 规则。
