bootstrap 5 的 bg-gradient 类不响应断点，必须用 @media (min-width: 768px) 控制 background-image 实现“仅 md 启用渐变”；md:bg-gradient-primary 是 tailwind 语法，d-md-none 仅隐藏元素而非关闭渐变，且子元素纯色背景会覆盖渐变。
Bootstrap 5 的 bg-gradient 类本身不响应断点，想“只在 md 断点启用渐变”，必须用 @media 直接控制 background-image，不能依赖工具类前缀或显示隐藏类。
为什么 md:bg-gradient-primary 或 d-md-none 不行
前者是 Tailwind 语法，Bootstrap 完全不识别；后者只是把整个元素藏掉，并非关闭渐变——小屏时 bg-gradient-primary 依然生效，只是你看不见内容。更糟的是，如果父容器有 background-color（比如 .card 默认带白底），它会直接盖住渐变，导致你以为“没效果”，其实是被遮了。
- 检查浏览器开发者工具的 Computed 面板，确认
background-image是否为none；如果是，大概率被background: #fff这类简写覆盖了 - 确保没在 Sass 中设
$enable-gradients: false，否则所有渐变类静默失效，控制台零提示 -
bg-gradient单独用无效——它只是个开关，必须搭配bg-primary等颜色类才触发，但这些类也无断点逻辑
怎么用 @media 精确控制渐变生效范围
最轻量、最可控的做法：对目标容器写媒体查询，只改 background-image，不动 background-color，避免清掉已有背景色或 fallback。
- 断点值必须严格对齐 Bootstrap 5 的
md：写@media (min-width: 768px)，不是767px或770px - 基础态（小屏）样式必须写在媒体查询外，例如先写
.hero { background-color: #fff; }，否则大屏可能继承不到 fallback - 方向优先用角度（如
90deg表示从左到右），比to right兼容性更稳，旧版 Safari 对关键词支持差 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50%, #000这种 color-stop 格式敏感，建议写成50% #000
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(90deg, #0d6efd, #20c997);
}
}
怎么让按钮也响应断点渐变
按钮更麻烦：Bootstrap 的 .btn-primary 带 background-color: #0d6efd !important，直接写 background: linear-gradient() 会被覆盖，且会清掉原有 background-image（比如禁用态的遮罩）。
- 必须用
background-image+background-color: transparent组合，transparent是硬性前提，不加就看不到渐变 -
:hover和:active必须单独定义background-image，否则悬停/点击时渐变不变，视觉反馈丢失 - iOS Safari 和部分安卓 WebView 可能跳过
:active，必须显式声明，且建议和:hover值一致，避免点击瞬间跳变 - Android Chrome 需补
-webkit-tap-highlight-color: transparent，防点击蒙层盖住渐变
自定义带断点前缀的渐变类（适合多处复用）
如果多个组件都要相同断点逻辑，可以定义类似 bg-md-gradient-primary 的类，但要注意权重问题——Bootstrap 的 bg-light 等类自带 !important，你的自定义类也得加。
SCSS 示例（使用 Bootstrap 断点变量）：
@include media-breakpoint-up(md) {
.bg-md-gradient-primary {
background-image: linear-gradient(135deg, #0d6efd, #86b7fe) !important;
}
}
使用时：<div class="bg-md-gradient-primary bg-light">。注意顺序：先写自定义渐变类，再写基础背景色类（如 <code>bg-light），确保小屏回退到纯色。
真正容易被忽略的是：渐变方向和 fallback 背景色必须协同设计。比如用 90deg 水平渐变时，若小屏 fallback 是深灰，而渐变右端是浅蓝，文字在右半区可能对比度不足——这不是 CSS 写错了，而是色彩逻辑没对齐。
