bootstrap 5 原生不支持 bg-gradient 类加断点前缀（如 md:bg-gradient-primary），该写法无效；必须用 @media (min-width: 768px) 等媒体查询配合 background-image: linear-gradient() 手动控制渐变在特定断点生效，基础样式写在查询外以确保小屏回退。
用 bg-gradient 类加断点前缀写渐变背景
Bootstrap 5 原生不支持直接写“响应式渐变背景”，bg-gradient 类本身是静态的，但你可以靠断点前缀（如 bg-gradient-start 并不存在）——等等，先澄清一个常见误解：Bootstrap 5 没有内置的 bg-gradient-{breakpoint} 类。它只提供 bg-gradient-primary 这类固定色阶的类，且不响应式。所以“最简代码”不是套个类就完事，而是得组合原生类 + 自定义 CSS，但控制在最少声明里。
用 @media 覆盖 background-image 最省事
真正最简、可维护、兼容性好（支持所有现代浏览器）的做法，是保留一个基础渐变，再用媒体查询覆盖。不需要 JS，不污染 HTML 结构，也不依赖第三方插件。
示例：移动端用垂直蓝→紫，桌面端切为水平蓝→绿：
.my-gradient {
background-image: linear-gradient(to bottom, #0d6efd, #6f42c1);
}
@media (min-width: 992px) {
.my-gradient {
background-image: linear-gradient(to right, #0d6efd, #20c997);
}
}
-
to bottom和to right方向可自由换，注意语法必须带to - 颜色值建议用 Bootstrap 的 CSS 变量（如
var(--bs-primary)），方便主题同步 - 别用
background简写覆盖整个属性，否则可能意外清掉background-size或background-position
为什么不用 style 属性或内联 @media
内联 style 写渐变无法响应式；CSS 中的 @media 不能写在 style 标签外（即不能用 <div style="..."> 实现断点切换）。有人试过用 <code>data- 属性配合 JS 动态切 class，但那已远超“最简”范畴，且增加运行时开销和 SSR 不友好风险。
- 纯 CSS 媒体查询是唯一零 JS、零构建依赖、服务端渲染安全的方案
- Bootstrap 5 的断点值（
576px,768px,992px,1200px,1400px）可直接复用，无需额外定义 - 如果项目已用 Sass，可抽成 mixin：
@mixin gradient-responsive($mobile-dir, $desktop-dir, $colors...)，但普通项目没必要
小心 background-clip 和 text 渐变冲突
如果你同时用了 bg-gradient 类和 text-bg-gradient（Bootstrap 5.3+ 新增），注意它们会互相干扰。例如给文字加渐变色时，若父容器也设了 background-image，而你又用了 background-clip: text，结果可能文字透明或背景错位。
- 文字渐变请单独用
class="text-gradient bg-gradient-primary"（需 Bootstrap 5.3+）或自定义background-clip: text; -webkit-text-fill-color: transparent; - 容器背景渐变和文字渐变不要共用同一个元素，拆成
<div class="bg-gradient"> <h2 class="text-gradient"> 更稳妥 </h2> <li>调试时用浏览器 DevTools 检查 computed <code>background-image是否被覆盖，而不是只看 styles 面板里的第一条
实际要让渐变“随断点变化”，核心就一条：别指望单个 class 解决，老实用两行 CSS + 一个媒体查询。复杂点在于方向、色值、断点阈值的组合校验，容易被忽略的是
background-image 的层叠顺序和 background-clip 的副作用。
