bootstrap 4 不提供任何带断点的渐变类，bg-gradient类根本不存在；所有渐变效果均需手动编写media查询覆盖background-image，且必须保留小屏background-color作为降级。
Bootstrap 4 的 bg-gradient 类根本不响应断点
它压根不存在——Bootstrap 4 官方 CSS 中没有 bg-gradient 这类工具类。你看到的渐变效果，基本来自手动写的 background-image: linear-gradient()，或是 Bootstrap 4 进度条、按钮等组件内部硬编码的渐变逻辑。所谓“在断点处修改渐变渲染模式”，实际是控制你自己写的渐变规则何时生效，不是调用某个内置响应式类。
用 @media 覆盖 background-image 是唯一可靠方式
Bootstrap 4 不提供任何带断点前缀的渐变类（比如 md:bg-gradient），这类写法是 Tailwind 的语法，完全不被识别。必须自己写媒体查询，且只动 background-image，不动 background 或 background-color，否则会清掉小屏 fallback 色。
- 基础态（如小屏）先写明确的
background-color: #fff - 再用
@media (min-width: 768px)覆盖background-image，方向优先用135deg，比to right兼容性更稳 - 颜色至少两个，单色值（如
linear-gradient(90deg, #0d6efd)）仍是纯色，不会触发渐变渲染 - 别加
!important到媒体查询里——只要选择器权重足够（比如直接用类名），就能覆盖 Bootstrap 4 默认样式
进度条等组件内渐变怎么改断点行为
Bootstrap 4 的 .progress-bar 默认用 background-image: linear-gradient(...) 渲染，且圆角、高度、行高都硬编码。想让它“只在 md+ 显示渐变”，不能靠删类，得用媒体查询精准覆盖：
- 小屏下设
.progress-bar { background-image: none; background-color: #0d6efd; } - 中屏起用
@media (min-width: 768px) { .progress-bar { background-image: linear-gradient(90deg, #0d6efd, #20c997); } } - 务必同步处理
border-radius：小屏可设为0，大屏恢复0.25rem，否则圆角和渐变方向错位 - 若用了
.progress-bar-striped，它的background-image也得一并覆盖，否则条纹和实色渐变打架
容易被忽略的渲染细节
渐变是否“渲染出来”，不只取决于 CSS 是否写对，还受子元素遮挡、透明度叠加、深色模式干扰影响：
-
.card、.container等默认有白色背景，会完全盖住父容器的渐变——得把它们设为background-color: rgba(255,255,255,0.9)才能透出 - 移动端 Safari 对
50%, #000这种 color-stop 格式支持差，换成50% #000更稳 - 深色模式下，
prefers-color-scheme: dark必须单独重写渐变色值，否则亮色渐变在暗背景下文字根本不可读 - 不要用
opacity控制背景透明——它会让文字、图标一起变淡；要用rgba()或渐变里的透明色值（如rgba(13,110,237,0.8)）
