bootstrap 5 的 bg-gradient 类不支持响应式断点，需用 @media + background-image 手动控制；小屏用 background-color 回退，中屏起用 background-image 覆盖，方向推荐角度值，深色模式需额外 media 查询重写色值。
Bootstrap 5 的 bg-gradient 类根本不响应断点
直接写 md:bg-gradient-primary 或 bg-gradient-primary d-md-none 都无效：md:bg-gradient-primary 是 Tailwind 的语法，Bootstrap 5 完全不解析；d-md-none 只隐藏整个元素，不是“关掉渐变”——小屏时你看到的是空白，不是纯色回退。所有 bg-gradient-* 类（如 bg-gradient-primary）都是无媒体查询的全局规则，方向固定为 135deg，且无法通过断点前缀控制生效范围。
用 @media + background-image 精确控制断点与方向
这是最轻量、兼容性最好、也最容易调试的做法。核心是分离基础态和断点态：小屏用 background-color 保底，中屏起用媒体查询覆盖 background-image，不碰 background 简写，避免清掉已有背景逻辑。
- 断点值必须严格对齐 Bootstrap 5 的
md：写@media (min-width: 768px)，不是767px或770px - 方向优先用角度（如
90deg表示从左到右），比to right在旧版 Safari 中更稳 - 必须用
background-image，不是background或background-color—— 后两者会覆盖或清空原有背景层 - 基础态（小屏）样式一定要写在媒体查询外，例如：
.hero { background-color: #fff; }
示例：仅在 md 及以上启用蓝→青水平渐变
@media (min-width: 768px) {
.hero {
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），便于主题同步 - HTML 中 class 顺序很重要：
class="bg-lg-gradient-to-b bg-white"—— 自定义类在前，降级色类在后
渐变 + 透明度 + 深色模式的连环坑
想加 80% 背景透明？别用 opacity，它会让文字和子元素一起变淡。真正需要的是背景层透明，只能靠 rgba() 色值或在 linear-gradient() 里写透明色。另外，深色模式下 bg-gradient-primary 依然输出亮色系渐变，用户切暗主题后可能根本看不清文字。
- 渐变中直接写透明色：比如
linear-gradient(135deg, rgba(13, 110, 237, 0.8), rgba(111, 66, 193, 0.8)) - 深色模式需额外加
@media (prefers-color-scheme: dark)重写渐变色值，不能依赖断点逻辑 - 子元素（如
.card）默认有白色背景，会完全盖住容器渐变 —— 得手动设成background-color: rgba(255, 255, 255, 0.9)留透出空间 - 文字对比度常跌破 WCAG 标准，尤其浅渐变配
text-dark时，必须同步调文字色（text-white配深渐变）
background-color 回退声明和深色模式下的渐变重写 —— 这两处一漏，要么移动端白屏，要么暗色主题下文字消失。
