<p>Bootstrap 5 不支持断点级渐变反转，因 bg-gradient-* 类方向固定为135deg且无响应式机制；md:bg-gradient-to-l等是Tailwind语法，Bootstrap不识别，需用@media手动重写background-image并指定相反角度。</p>
Bootstrap 5 原生不支持断点级渐变反转（比如小屏左→右、大屏右→左），所有 bg-gradient-* 类方向固定为 135deg 且无响应式包裹；必须用媒体查询手动重写 background-image，并显式指定相反角度或 to 方向。
为什么 bg-gradient-to-r 和 md:bg-gradient-to-l 完全无效
Bootstrap 5 不识别 to-r、to-l 或任何带断点前缀的渐变类名——这些是 Tailwind 的语法。Bootstrap 的 bg-gradient-primary 底层是硬编码的 linear-gradient(135deg, #0d6efd, #86b7fe)，没有媒体查询，也没有方向变量。加 md: 前缀只会让整个规则被浏览器忽略。
用 @media 分别控制小屏和大屏的渐变方向
核心是分离基础态与断点覆盖：小屏用一个方向，大屏用相反方向，都只改 background-image，不动 background-color。
- 小屏（xs）基础态直接写：
.hero { background-image: linear-gradient(90deg, #0d6efd, #20c997); }（从左到右） - 中屏起（md）用
@media (min-width: 768px)覆盖为：background-image: linear-gradient(270deg, #0d6efd, #20c997);（从右到左） - 角度比
to left更稳：旧版 Safari 对to关键词支持差，270deg是明确反向 - 务必确保小屏样式写在媒体查询外，否则大屏可能继承不到初始值
多个断点下做三次反转（如 xs→md→lg）
不能靠叠加类实现，必须用嵌套媒体查询，按 Bootstrap 断点值严格分层：
-
@media (max-width: 575.98px)：xs，设background-image: linear-gradient(0deg, ...)（上→下） -
@media (min-width: 576px) and (max-width: 767.98px)：sm，设background-image: linear-gradient(90deg, ...)（左→右） -
@media (min-width: 768px)：md 及以上，设background-image: linear-gradient(180deg, ...)（下→上） - 每个断点块里只写
background-image，避免用background简写清掉已有背景色 - 如果用了
bg-light这类工具类，它设置的background-color会自然作为 fallback，无需重复声明
反转时容易漏掉的兼容性细节
方向反转只是表象，真正容易出问题的是渐变色在不同上下文中的表现：
- 子元素（如
.card、.container）默认有纯白背景，会完全遮住容器渐变——需设background-color: rgba(255,255,255,0.95)留透出空间 - 深色模式下，同一组色值在暗背景上可能对比度崩塌——必须额外加
@media (prefers-color-scheme: dark)重写渐变色 - 移动端 Safari 对
50% #000格式比50%, #000更可靠，color-stop 写法要统一 - 反转后文字颜色常不匹配：比如左→右蓝绿渐变配
text-dark可读，但右→左时右侧变浅，文字可能发灰——需同步调text-white或用text-body-emphasis
