bootstrap 5 的 bg-gradient 类不支持断点前缀和方向参数，所有内置渐变方向固定为135deg且无响应式能力；正确做法是用媒体查询配合 background-image 精确控制断点与方向，并注意避免子元素遮挡。
Bootstrap 5 的 bg-gradient 类不支持断点前缀或方向参数
直接写 md:bg-gradient-to-r 或 bg-gradient-to-b 在 Bootstrap 中完全无效——这是 Tailwind 的语法，Bootstrap 5 不识别。所有内置渐变类（如 bg-gradient-primary）方向固定为 135deg（左上→右下），且无媒体查询包裹，天生不响应断点。
常见错误包括：
– 给 bg-gradient-primary 加 d-md-none，结果是整个元素消失，不是“渐变关闭”；
– 在 SCSS 中误设 $enable-gradients: false，导致所有渐变静默失效，控制台无提示；
– 单独用 bg-gradient 没配颜色类，它只是个开关，不带颜色也不定义方向。
用媒体查询 + background-image 精确控制断点与方向
真正可控的做法是绕过工具类，直接对目标容器写媒体查询，并用 background-image 注入渐变。关键在于：只改渐变，不碰 background-color，避免覆盖已有背景色或纹理。
- 方向优先用角度（如
90deg表示从左到右，180deg表示从上到下），比to right兼容性更稳，尤其在旧版 Safari 中 - 必须用
background-image，不是background或background-color——后者会清掉原有背景逻辑 - 断点值严格对齐 Bootstrap 5 定义：
@media (min-width: 768px)对应md，不是767px或770px - 小屏基础态必须写在媒体查询外，例如先设
.hero { background-color: #fff; }，再在@media里覆盖background-image
示例：仅在 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"——自定义类在前，降级纯色在后
SCSS 示例：
@include media-breakpoint-up(lg) {
.bg-lg-gradient-to-b {
background-image: linear-gradient(to bottom, $primary, $success) !important;
}
}
渐变没显示？大概率是子元素盖住了它
背景渐变“看不见”，往往不是 CSS 写错了，而是被子元素的不透明背景盖住。尤其当容器内有 .card、.btn 或显式设置了 background-color: white 的组件时，底层渐变完全不可见。
- 检查子元素是否用了
background-color: #fff—— 改成rgba(255, 255, 255, 0.95)留出透出空间 - 别把渐变写在
.row上：.row默认有负外边距，实际渲染区域比视觉容器小 - 若用了
overflow: hidden和圆角，渐变可能被裁掉，尤其方向与圆角冲突时 - 确认没误加
bg-transparent，它会清掉整个背景（含渐变）
最轻量验证方式：临时给容器加 border: 2px solid red，看渐变是否在 border 内正常渲染——这能快速区分是“没生效”还是“被遮挡”。
