直接加 bg-gradient-primary d-md-block 不生效，因为前者是全局生效的静态类，后者仅控制显隐而非渐变开关；真正响应式渐变需用媒体查询配合 background-image 实现。
为什么直接加 bg-gradient-primary d-md-block 不生效
因为 bg-gradient-primary 是一个静态工具类，它在所有断点下都生效；d-md-block 控制的是元素的 display 属性，不是渐变开关。两者叠加的结果是：小屏时元素被隐藏（display: none），大屏时元素显示且带渐变——但这不是“渐变响应式”，而是“整个区块响应式”。真正需要的是渐变样式本身随断点变化，而不是靠显隐控制。
常见误操作包括：bg-gradient-primary d-none d-md-block → 小屏没内容，不是渐变关闭；md:bg-gradient-primary → Bootstrap 不识别这种 Tailwind 风格前缀，CSS 规则压根不生成。
-
bg-gradient类必须搭配至少一个bg-*类（如bg-primary）才生效，单独使用无效 - 若项目 SCSS 中设了
$enable-gradients: false，所有渐变类会静默失效，控制台无报错 - 渐变本质是
background-image，不是background-color，所以不能靠媒体查询去改.bg-primary的颜色值来“覆盖”渐变
用 @media 直接控制 background-image 的写法
最轻量、最可控的方式：对目标容器写媒体查询，用 background-image: linear-gradient() 注入渐变，不碰 Bootstrap 工具类。关键点在于用 background-image 而非 background 简写，避免清掉已有背景色或纹理。
示例：仅在 md（≥768px）及以上启用左上→右下蓝紫渐变，小屏回退为纯白背景：
.hero-section {
background-color: #fff;
}
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
- 断点值必须严格匹配 Bootstrap 5 的
md：768px（不是 767px 或 770px） - 方向优先用角度（如
135deg），比to right兼容性更稳；旧版 Safari 对to-r或left to right支持差 - 颜色至少两个，否则仍是纯色；移动端 Safari 对 color-stop 格式敏感，写
50% #000比50%, #000更稳妥 - 如果用了深色模式，需额外加
@media (prefers-color-scheme: dark)单独适配
自定义带断点前缀的渐变类（适合多处复用）
若多个组件需相同断点逻辑，可定义类似 bg-md-gradient-primary 的类，避免重复写媒体查询。Bootstrap 不提供这类类名，必须自己补。
SCSS 示例（需项目启用 Sass 编译）：
@include media-breakpoint-up(md) {
.bg-md-gradient-primary {
background-image: linear-gradient(135deg, $primary, $secondary) !important;
}
}
- 必须加
!important：Bootstrap 的bg-light等类自带!important，不加则被覆盖 - 使用时注意顺序：
<div class="bg-md-gradient-primary bg-light"> —— 自定义类在前，降级类在后，确保小屏回退到 <code>bg-light的纯色背景 - 别用
background简写：它会一并清除background-color和background-image，导致降级失败 - 若项目未用 Sass，直接在 CSS 文件中写
@media (min-width: 768px) { .bg-md-gradient-primary { ... } }同样有效 - 检查 computed styles 中
background-image是否为none—— 是的话，大概率被background简写覆盖了 - 子元素背景改为半透：
background-color: rgba(255, 255, 255, 0.9)，留出渐变透出空间 - 导航栏固定后，
.navbar-collapse是独立节点，需单独设bg-transparent或rgba() - 若渐变用于按钮等组件，注意文字对比度：
text-white在深渐变底色下比text-dark更稳妥
透明度控制要同时处理 background-image 和子元素遮盖
渐变背景“看起来不透明”，往往不是渐变本身问题，而是子元素（如 .card、.navbar-collapse）自带不透明背景色盖住了它。尤其在导航栏或卡片区域，background-color: white 会完全挡住底层渐变。
实操要点：
复杂点不在写渐变，而在理清哪一层该透明、哪一层该降级、哪一层该用 !important 压住默认权重——这些细节不检查，光调色值没用。
