Bootstrap 5 不支持断点控制渐变方向，需手写 media query 分屏重写 background-image：小屏用 90deg（竖向），中屏起用 0deg（横向），并注意兼容性、权重、回退色及可访问性。
Bootstrap 5 原生不支持断点控制渐变方向
直接用 bg-gradient-to-r、bg-gradient-to-b 这类类名会失效 —— Bootstrap 5 官方 CSS 根本没定义这些类。它只提供固定角度的预设渐变，比如 bg-gradient-primary 固定是 linear-gradient(135deg, ...)，无法通过加 md: 或 d-md-block 改变方向。
必须手写 media query 覆盖 background-image
想实现“小屏竖向渐变、大屏横向渐变”，得自己补 CSS，核心是分断点重写 background-image，而不是试图复用或组合 Bootstrap 工具类：
- 小屏（默认）用
background-image: linear-gradient(90deg, #007bff, #6f42c1)（竖向，即从上到下） - 中屏起（
@media (min-width: 768px)）覆盖为background-image: linear-gradient(0deg, #007bff, #6f42c1)（横向，即从左到右） - 务必用
background-image，不是background—— 后者会清掉颜色、圆角等已有背景属性 - 角度值优先用
0deg/90deg，比to right兼容性更稳，尤其在 iOS 15 以下 Safari 中
自定义类名要带断点前缀且注意加载顺序
如果多个地方要用“仅 md+ 横向渐变”，建议定义类似 bg-md-gradient-h 的类：
- SCSS 中可直接引用
$grid-breakpoints：@include media-breakpoint-up(md) { .bg-md-gradient-h { background-image: linear-gradient(0deg, #007bff, #6f42c1); } } - HTML 中写成
class="bg-md-gradient-h bg-light"—— 自定义类在前，保底色类在后 - 别省略
!important：Bootstrap 的bg-light等类自带!important，你的规则权重不够会被覆盖 - 小屏必须显式声明回退色，否则可能透明：比如加
background-color: #f8f9fa在基础态里
容易被忽略的细节：方向切换 ≠ 视觉切换完成
改了渐变方向，但文字对比度可能瞬间跌破 WCAG 标准；子元素如 .card 默认白色背景会完全遮住容器渐变；深色模式下 prefers-color-scheme: dark 里渐变色还得单独重写。这些不是样式没生效，而是方向一变，整个视觉链就断了。
