Bootstrap 5 的 bg-gradient 类不支持断点前缀，所有渐变方向固定为135deg且无响应式逻辑；需用@media手动控制background-image角度值（如90deg），严格对齐Bootstrap断点（如768px对应md），并注意深色模式与子元素遮挡问题。
Bootstrap 的 bg-gradient 类根本不支持断点前缀
直接写 md:bg-gradient-to-r 或 lg:bg-gradient-to-b 完全无效——这是 Tailwind 的语法，Bootstrap 5 不解析任何带断点前缀的渐变类。所有内置 bg-gradient-primary 等类方向固定为 135deg（左上→右下），且无媒体查询包裹，天生不响应屏幕尺寸。
用 @media 手动控制 background-image 方向
真正可控的方式是绕过工具类，对目标元素写媒体查询，只改 background-image，保留原有 background-color 作为降级。关键点：
- 方向必须用角度值（如
90deg表示从左到右），比to right兼容性更稳，尤其旧版 Safari - 断点值严格对齐 Bootstrap 5 定义：
@media (min-width: 768px)对应md，不是767px或770px - 小屏基础态必须写在媒体查询外，例如先设
.hero { background-color: #fff; }，否则大屏可能继承不到 fallback - 务必用
background-image，不是background或background-color——后者会清掉已有背景逻辑
示例：仅在 md 及以上启用从左到右蓝→青渐变
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(90deg, #0d6efd, #20c997);
}
}
自定义带断点前缀的渐变类（适合多处复用）
如果多个组件需相同断点逻辑（比如都只在 lg 启用垂直渐变），可定义类似 bg-lg-gradient-to-b 的类。注意它不是 Bootstrap 原生类，需手动补全：
- 必须加
!important：Bootstrap 的bg-light等类自带!important，你的规则需同等权重才能覆盖 - 用 Sass 时推荐复用断点变量：
@include media-breakpoint-up(lg) { ... }，避免硬编码像素值 - 颜色建议引用 Bootstrap 调色板变量（如
$primary,$success），便于主题同步 - 使用时注意 class 顺序：
class="bg-lg-gradient-to-b bg-white"——自定义类在前，降级纯色在后
容易被忽略的深色模式与子元素遮挡问题
渐变一加上，文字对比度常跌破 WCAG 标准；子元素（如 .card、.container）默认有白色背景，会完全盖住容器渐变——这不是渐变没生效，而是视觉被遮挡：
- 深色模式下，必须额外加
@media (prefers-color-scheme: dark)单独重写渐变色，否则用户切主题后仍看到亮色渐变 - 子元素如
.card需显式设background-color: rgba(255,255,255,0.9)留出透出空间 - 渐变方向值写
180deg比to bottom更安全，旧版 Safari 对缩写支持差
