用 bg-gradient 配合 d-none d-md-block 可实现响应式渐变背景，需确保两工具类作用于同一元素；错误嵌套会导致移动端残留背景；注意 background-image 覆盖问题及父容器高度适配。
用 bg-gradient 配合 d-none d-md-block 类就能实现
Bootstrap 的渐变背景类（如 bg-gradient-primary）本身不带响应式控制，必须叠加显示/隐藏工具类。桌面端通常指视口 ≥768px（md 断点），所以直接用 d-none d-md-block：在 xs/sm 隐藏，md 及以上显示。
-
d-none强制隐藏所有设备 -
d-md-block在md（768px）及以上恢复为display: block - 两个类同时加在同一个元素上，CSS 层叠后生效顺序由断点类决定
别把渐变类和响应式类写在不同元素上
常见错误是把 bg-gradient 放在子容器、而 d-none d-md-block 加在父容器——这样即使父容器隐藏了，子容器的渐变样式仍可能被继承或影响布局。必须确保两个类作用于同一 DOM 元素。
- ✅ 正确：
<div class="bg-gradient-primary d-none d-md-block"></div>
- ❌ 错误：
<div class="d-none d-md-block"><div class="bg-gradient-primary"></div></div>
- 如果必须嵌套，至少给子元素也加
d-none d-md-block，否则移动端可能残留背景色或高度
渐变方向在桌面端失效？检查是否覆盖了 background-image
某些自定义 CSS 或重置样式会清空 background-image，导致 bg-gradient-* 失效。Bootstrap 5 的渐变类本质是设置 background-image: linear-gradient(...)，它容易被后续规则覆盖。
- 用浏览器开发者工具检查元素 computed styles，确认
background-image是否为linear-gradient - 若被覆盖，可加
!important临时验证（不推荐长期使用）：.bg-gradient-primary { background-image: linear-gradient(180deg, #0d6efd, #0a58ca) !important; } - 更稳妥的方式：用自定义 CSS 类替代，例如
bg-desktop-gradient，并限定媒体查询@media (min-width: 768px)
需要兼容旧版 Bootstrap 4？类名略有不同
Bootstrap 4 没有 bg-gradient-* 原生支持，需手动添加 CSS；且其响应式显示类是 d-none d-md-block（与 v5 一致），但断点值略有差异（v4 的 md 是 768px，v5 也是，实际兼容性好）。
- v4 中要实现渐变，得自己写：
.bg-gradient-primary { background: linear-gradient(180deg, #007bff, #0056b3); } - v4/v5 都支持
d-none d-md-block，无需额外 polyfill - 注意 v4 默认不启用
prefers-reduced-motion相关渐变降级逻辑，v5 则有轻微自动适配
最易被忽略的是：渐变背景若用在 或全屏 <section></section> 上，移动端隐藏后可能留下空白或滚动条——务必检查父容器高度是否依赖该元素，必要时用 min-height: 100vh 或媒体查询单独控制。
