bg-gradient-primary 在小屏下无渐变是因为该类本身不响应断点，常见原因包括被 bg-white 覆盖、容器隐藏或裁剪、自定义样式未用 !important 覆盖、safari/webview 渲染兼容性问题及简写 background 清除关键属性。
为什么加了 bg-gradient-primary 却在小屏下没渐变
Bootstrap 5 的 bg-gradient-* 类本身不带断点逻辑，它默认作用于所有屏幕尺寸。所谓“小屏失效”，往往是因为：元素在小屏时被其他样式覆盖或隐藏，而非渐变类本身失效。
常见真实原因包括：
-
bg-gradient-primary和bg-white写在同一元素上——后者会覆盖前者的background-image，尤其当bg-white出现在 class 列表后时 - 用了
d-none d-md-block包裹渐变容器，结果小屏时整个 DOM 节点不可见，不是“渐变没了”，而是“内容没了” - 小屏下父容器设置了
overflow: hidden或background-color: #fff，把子元素的渐变裁掉或盖住 - 自定义 CSS 中写了
.my-card { background: #fff; }但没加媒体查询，导致小屏继承纯色，大屏才覆盖为渐变
@media 里写 background-image 却没生效
响应式渐变必须靠媒体查询重置 background 或 background-image，但直接写容易被忽略几个关键点：
- 基础态（小屏）样式必须写在
@media外，否则大屏规则可能因层叠顺序丢失 fallback - 断点值必须严格匹配 Bootstrap 5 的
md：用@media (min-width: 768px)，不能是767px或770px - 如果原生类（如
bg-gradient-primary）已存在，它的background-image带!important，你的媒体查询规则也得加!important才能覆盖 - 别在媒体查询里用
background: linear-gradient()简写——它会清掉background-color，而按钮、警告框等组件依赖该属性做禁用态降级
渐变在 iOS Safari 或安卓 WebView 中显示为纯色
这不是代码写错，而是渲染引擎对 background-image 的渐变支持有差异，尤其在低版本 WebView 中：
- 避免用
to right、to bottom这类方向关键词，改用角度值（如90deg、180deg），Safari 15–16.3 对to语法支持不稳定 - 确保至少两个色标，
linear-gradient(90deg, #0d6efd)是无效写法，浏览器会退化为纯色 - 如果用了
background-size: 200% 200%配合动画，某些安卓 WebView 会直接忽略整个background-image - 检查是否意外启用了
transform: translateZ(0)或will-change: transform，它们在部分旧版 Android 上会禁用背景渐变渲染
自定义渐变类和原生 bg-gradient-* 同时存在时互相干扰
当你既写了 bg-gradient-primary 又加了自定义类（如 my-horiz），实际生效的是权重更高、声明更靠后的那个，但背后还有隐性冲突：
-
bg-gradient-primary内部用background-image: linear-gradient(135deg, ...)，而你的.my-horiz如果也用background-image但没加!important，就会被覆盖 - 若你用
background: linear-gradient(...)简写，它会一并重置background-color和background-position，而bg-gradient-primary本就不设background-color，结果禁用态（:disabled）变成透明或不可读 - 最稳妥做法：彻底弃用原生
bg-gradient-*，只用自定义类，并在其中显式声明background-color: transparent和各状态的background-image
bg-gradient-* 从设计上就**不响应断点**——它只是个开关，开或关，不负责条件启用。要实现“仅 md+ 渐变”，就得放弃工具类思维，老实用媒体查询控制样式层叠。
