bootstrap 5 不支持断点响应式渐变类，需用媒体查询自定义css：如@media (min-width: 768px) { .class { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); } }，并确保小屏回退纯色。
Bootstrap 5 怎么在 md 断点下用渐变背景
Bootstrap 5 自带的 bg-gradient- 工具类（如 bg-gradient-primary）默认作用于所有断点，无法直接响应式控制“仅在 md 及以上生效”。必须配合断点前缀类手动组合，不能靠单个类名实现。
正确做法是：用 bg-gradient- + d-md-block（或 d-none d-md-block）组合控制显示逻辑，再通过自定义 CSS 覆盖背景样式。纯工具类方案不存在。
-
bg-gradient-primary本身不带断点前缀，加md:前缀无效（如md:bg-gradient-primary是 Tailwind 写法，Bootstrap 不支持） - 想“仅在
md下启用渐变”，得先禁用小屏的渐变（比如用bg-white），再用d-none d-md-block包裹一个仅大屏显示的渐变容器 - 更稳妥的方式是写一行自定义 CSS，用
@media (min-width: 768px)精确控制background值
怎么写响应式渐变 background 的 CSS 规则
Bootstrap 的渐变本质是 background: linear-gradient(...)，所以响应式就得靠媒体查询重置 background 属性。别试图复用 bg-gradient- 类，它没断点逻辑。
示例：给 div.card 在 md 及以上设蓝紫渐变，小屏回退为纯白：
.card {
background: #fff;
}
@media (min-width: 768px) {
.card {
background: linear-gradient(135deg, #007bff, #6f42c1);
}
}
- 断点值必须和 Bootstrap 5 的
md一致：768px（不是767px或770px） - 务必把基础态（小屏）样式写在媒体查询外，否则大屏可能继承不到
- 如果用了
!important强制覆盖，说明你没理清层叠顺序——优先检查选择器权重，而不是加!important
为什么直接加 bg-gradient-primary d-md-block 不生效
因为 bg-gradient-primary 设置的是 background-image，而 d-md-block 控制的是 display。二者不冲突，但不会“让渐变只在 md 生效”——小屏时该类依然存在，只是元素不可见；一旦你用 d-md-block 隐藏了元素，那整个区块都没了，不是“渐变消失”而是“内容消失”。
- 常见错误：给同一个元素同时加
bg-gradient-primary和d-none d-md-block→ 小屏时元素被隐藏，但开发者误以为“渐变被关掉了” - 真正需要的是“渐变样式条件性应用”，不是“元素条件性显示”
- 若必须用工具类组合，得套两层：外层小屏显示纯色，内层仅
md+显示且带渐变，再用position: absolute叠加 —— 复杂且易出布局问题
移动端适配时渐变容易糊或闪烁怎么办
部分安卓 WebView 或 iOS Safari 在缩放/滚动时会对 linear-gradient 重绘异常，表现为色块断裂或过渡生硬。这不是 Bootstrap 的锅，但叠加响应式后更容易暴露。
- 加
-webkit-background-clip: text之类属性会加剧问题，避免在渐变背景上滥用文字裁剪 - 用
background-size: 200% 200%+background-position: 0 0并配合transition: background-position的动画式渐变，在小屏上反而更卡，慎用 - 最简解法：小屏直接禁用渐变，用单色
background-color—— 用户体验比“糊掉的渐变”更可靠
断点交界处（比如刚好 768px）的渲染差异很难完全消除，别纠结像素级一致性，重点保证功能可用和颜色可读。
