bootstrap 5 的 bg-gradient 类不支持响应式断点，需用媒体查询或自定义带断点前缀的类实现条件渐变；d-md-block 控制显示而非渐变，bg-gradient 始终生效，真正生效需 background-image 断点控制或 !important 覆盖。
Bootstrap 5 的 bg-gradient 类本身不响应断点，加 md:bg-gradient 或 d-md-block 都不能让渐变“只在中屏生效”——它要么全局存在，要么整个元素被隐藏。真要实现断点渐变，必须用媒体查询控制 background-image，或自定义带断点前缀的类。
为什么直接加 bg-gradient-primary d-md-block 不起作用
因为 d-md-block 控制的是 display，不是渐变开关；小屏时元素虽然显示，但 bg-gradient-primary 依然在生效，只是你没注意到它被其他样式覆盖了。更常见的情况是：写了 bg-gradient-primary d-none d-md-block，结果中屏才出现元素——这不是“渐变启用”，而是“内容延迟加载”。真正需要的是渐变样式本身的条件性应用。
-
bg-gradient是纯 CSS 工具类，无任何媒体查询包裹，所有断点都生效 -
d-{breakpoint}-*类只影响可见性，不参与背景渲染逻辑 - 如果同时用了
bg-light和bg-gradient-primary，后者会注入background-image，但若bg-light带!important，就可能压住渐变 - 检查是否误设了
$enable-gradients: false（SCSS 中），这会让所有渐变类静默失效，控制台无报错
用媒体查询直接写 background-image
最轻量、最可控的方式：对目标容器单独写断点规则，明确指定渐变方向和颜色。适合只在 1–2 处使用的场景。
- 必须用
background-image，不是background——后者会清掉已有background-color或图片纹理 - 方向优先写角度（如
135deg），比to right兼容性更稳，旧版 Safari 对关键词支持差 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
color-stop格式敏感，写50% #000比50%, #000更稳妥 - 断点值必须与 Bootstrap 5 一致：
@media (min-width: 768px)对应md，别用767px或770px
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
自定义带断点前缀的渐变类（如 bg-md-gradient-primary）
适合多处复用，避免重复写媒体查询。需在项目 SCSS 或全局 CSS 中定义，并注意类名顺序和权重问题。
- 必须加
!important：Bootstrap 的bg-light等类自带!important，不加会导致小屏回退失败 - 使用时顺序很重要：
class="bg-md-gradient-primary bg-light"—— 自定义类在前，基础色类在后，确保小屏能 fallback 到纯色 - 若用 Sass，可复用断点变量：
@include media-breakpoint-up(md) { ... }，避免硬编码像素值 - 别试图重写
.bg-primary的媒体查询规则——它的选择器权重高，你的规则大概率被忽略
@include media-breakpoint-up(md) {
.bg-md-gradient-primary {
background-image: linear-gradient(135deg, $primary, $secondary) !important;
}
}
按钮、卡片等组件上加渐变要注意什么
这些组件默认用 background-color，没有预设 background-image，直接套 bg-gradient 无效。必须手动覆盖，且要同步处理交互态。
- 按钮需重写
:hover、:active、:disabled下的background-image和background-color，否则悬停时渐变消失 - 卡片类（如
.card）若用了border或box-shadow，渐变可能被遮挡，建议加overflow: hidden - 文字颜色必须重新评估对比度——浅渐变配
text-dark可能不够，得手动调成#333或加边框提升可读性 - 深色模式下，
prefers-color-scheme: dark需嵌套在断点媒体查询内，否则容易被忽略
真正难的不是写几行 CSS，而是确保小屏彻底关闭渐变、大屏精准启用、交互态不崩、文字始终可读——这些细节没法靠一个类名解决，得逐层验证。
