Bootstrap 5 的 bg-gradient 类不支持响应式断点，必须用媒体查询控制 background-image 实现条件渐变；混用 d-md-block 等显示类无法开关渐变，因二者逻辑独立；自定义断点渐变类需用 !important 并注意加载顺序。
Bootstrap 5 的 bg-gradient 类本身不响应断点，加 md:bg-gradient 或 d-md-block 都不能让渐变“只在中屏生效”——它要么全局存在，要么整个元素被隐藏。真要实现断点渐变，必须绕过工具类，用 CSS 媒体查询直接控制 background-image。
为什么直接加 bg-gradient-primary d-md-block 不行
因为 bg-gradient-primary 是一个无媒体查询的静态类，它会在所有尺寸下注入 background-image: linear-gradient(...)；而 d-md-block 只控制 display，不是控制渐变开关。结果是：小屏时元素可见但没渐变（因为你没给它配 bg-primary），中屏时元素可见且有渐变——但这不是“条件启用”，只是“碰巧同时满足”。更糟的是，如果还加了 d-none d-md-block，小屏时元素直接消失，根本不是渐变被关掉。
- 渐变逻辑和显示逻辑是两回事，混用会误导调试方向
-
bg-gradient单独写无效，必须搭配bg-*<code> 类（如 <code>bg-light）才能触发 Bootstrap 的渐变注入 - 若项目 SCSS 中设了
$enable-gradients: false，所有渐变类都会静默失效，控制台无报错
用 @media 直接写断点渐变最可靠
对目标容器写媒体查询，只在指定断点内设置 background-image，小屏默认回退到纯色背景。这是兼容性最好、逻辑最清晰的做法。
- 断点值严格用
768px（Bootstrap 5 的md起点），别写767px或770px - 必须用
background-image，不是background——后者会清掉已有的background-color或图片纹理 - 方向优先写角度（如
135deg），比to right兼容性更稳，旧版 Safari 对关键词支持差 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50%, #000这种 color-stop 写法敏感，推荐50% #000
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
自定义带断点前缀的渐变类（适合多处复用）
如果多个组件都要在 md 断点启用相同渐变，可以封装成类似 bg-md-gradient-primary 的类，避免重复写媒体查询。但要注意权重和覆盖逻辑。
- 在 SCSS 中用
@include media-breakpoint-up(md)包裹，自动复用 Bootstrap 断点变量 - 必须加
!important：Bootstrap 的bg-light等类自带!important，你的自定义类需同等权重才能覆盖 - 使用时顺序很重要：
class="bg-md-gradient-primary bg-light"——自定义类在前，基础色类在后，确保小屏回退到bg-light的纯色 - 别用
background简写，坚持用background-image，否则可能意外抹掉降级背景
@include media-breakpoint-up(md) {
.bg-md-gradient-primary {
background-image: linear-gradient(135deg, #0d6efd, #86b7fe) !important;
}
}
按钮等交互组件的渐变要额外处理状态
按钮不是普通容器，它的 :hover、:active、:disabled 状态默认只改 background-color。如果你只覆盖了常态下的 background-image，悬停时就会退回到纯色或透明，失去反馈。
- 必须显式重写
:hover和:active的background-image（或background） -
background-color: transparent !important是必要前置，否则 Bootstrap 的原生background-color会盖住渐变 - 移动端点击无压感？补
-webkit-tap-highlight-color: rgba(0,0,0,0.1) - 深色模式下文字对比度容易不足，建议同步加
text-white或调整边框色提升可读性
真正麻烦的不是写几行 CSS，而是渐变方向、色标位置、alpha 透明度这三者稍一变动，就可能让文字在阳光下完全不可读——这种问题没法靠工具自动发现，只能手动调、反复测、真机看。
