必须用 background-image 显式声明渐变并配合媒体查询切换方向或颜色，如手机竖屏用 to bottom、桌面用 to right，禁用 !important 而提升选择器权重，注意 iOS Safari 渲染兼容性。
直接用 CSS 写，别依赖 Bootstrap 的 class
Bootstrap 本身不提供响应式渐变背景的内置 class。它的 .bg-gradient（v5.3+）只支持静态、固定方向的线性渐变，且不随屏幕尺寸变化重定义。真要“响应式渐变”，必须自己写 CSS 媒体查询或使用现代特性（如 background-image + @media 或 prefers-reduced-motion 等）。
怎么让渐变随屏幕宽度切换方向或颜色
常见需求是：手机竖屏用上下渐变，桌面用左右渐变；或深色模式下换一组色值。关键不是“Bootstrap 怎么配”，而是怎么组织 CSS：
- 用
background-image: linear-gradient(...)显式声明，别依赖.bg-gradient-primary - 在
@media (max-width: 768px)里覆盖background-image，改方向（to bottom→to right）或停用渐变（回退纯色） - 避免用
!important覆盖 Bootstrap 的!important规则，优先提高选择器权重（比如加.my-section类）
示例：
.hero-banner {
background-image: linear-gradient(90deg, #4e54c8, #8f94fb);
}
@media (max-width: 768px) {
.hero-banner {
background-image: linear-gradient(180deg, #4e54c8, #8f94fb);
}
}
移动端性能和兼容性要注意什么
渐变本身开销小，但叠加在滚动容器或伪元素上可能触发重绘。尤其 iOS Safari 对 background-attachment: fixed + 渐变组合有渲染 bug，容易白屏或闪烁：
- 禁用
background-attachment: fixed，改用position: sticky或 JS 滚动监听（更可控） - 不要在
:before/:after上叠加多层渐变，iOS 15–16 有混合模式渲染异常 - 如果支持 IE11，需加
filter: progid:DXImageTransform.Microsoft.gradient(...)回退，但现代项目通常不用
想用 Bootstrap 的颜色系统？得手动映射
Bootstrap 的 $primary、$secondary 是 Sass 变量，编译后不暴露到 CSS 运行时。所以不能在纯 CSS 里写 linear-gradient(to right, $primary, $secondary)：
- 要么在 Sass 文件里写：
background-image: linear-gradient(90deg, $primary, $secondary); - 要么提取 CSS 自定义属性（
--bs-primary-rgb），再用rgb(var(--bs-primary-rgb))拼接（注意 IE 不支持） - 别试图用 JS 读取
getComputedStyle获取 Bootstrap 颜色——它返回的是最终计算值（如rgb(13, 110, 253)），无法反推变量名
真正难的不是写几行渐变代码，而是决定在哪一层做响应逻辑：CSS 媒体查询？JS resize 监听？还是用 picture 思路切不同背景图？选错层，后面维护成本翻倍。
