Bootstrap 5 不支持响应式渐变角度，需用媒体查询覆盖 background-image；md:bg-gradient-to-r 无效因类不存在；按钮需设 background-color: transparent !important 并单独定义 :hover/:active。
Bootstrap 5 原生不支持按断点修改渐变角度，bg-gradient-primary 等类的方向固定为 135deg，无论屏幕尺寸如何都不会变化；必须用媒体查询手动覆盖 background-image 才能实现“仅在平板端（md）改角度”。
为什么 md:bg-gradient-to-r 完全无效
这是 Tailwind 的写法，Bootstrap 5 的 CSS 文件里根本不存在带断点前缀的渐变类。浏览器解析时直接忽略该类名，不会报错也不会生效。常见误操作还包括：
- 给
div同时加bg-gradient-primary和d-md-block→ 实际只是控制显隐，不是改角度 - 在 SCSS 中写了
@include media-breakpoint-up(md) { .box { @extend .bg-gradient-primary; } }→@extend不会复制background-image声明，只继承选择器逻辑，结果无样式 - 用
style="background: linear-gradient(to right, ...)"写在 HTML 里 → 覆盖了所有响应式规则，且无法随断点动态切换
正确做法：用 @media (min-width: 768px) 覆盖 background-image
Bootstrap 5 的 md 断点严格定义为 768px，不是 767px 或 770px。关键是要只改渐变方向，不碰已有背景色或纹理：
- 基础态（小屏）先写死默认方向，比如
background-image: linear-gradient(135deg, #0d6efd, #6f42c1); - 在
@media (min-width: 768px)里重写background-image，角度换成90deg（从左到右）或0deg（从上到下） - 务必用
background-image，不是background—— 后者会清掉background-color，导致小屏回退失效 - 角度比
to right更稳，尤其在旧版 Safari（iOS 15.4 之前）中对关键词解析有 bug
/* 小屏：默认左上→右下 */
.hero {
background-color: #fff;
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
<p>/<em> 平板端（md+）：改为从左到右 </em>/
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(90deg, #0d6efd, #6f42c1);
}
}按钮等组件上改角度要额外注意 background-color: transparent
Bootstrap 的 .btn-primary 类自带 background-color: #0d6efd !important，如果你只改 background-image，这个高权重纯色会盖住渐变。必须显式设透明：
-
background-color: transparent !important是硬性前提，不加就看不到任何渐变效果 -
:hover和:active状态也要单独写background-image，否则悬停时渐变“消失”，视觉反馈丢失 - 移动端 WebView（如安卓微信 X5）可能跳过
:active，必须显式声明，且建议和:hover值一致，避免点击瞬间跳变
.btn-custom-gradient {
background-color: transparent !important;
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
.btn-custom-gradient:hover {
background-image: linear-gradient(90deg, #0d6efd, #6f42c1);
}
.btn-custom-gradient:active {
background-image: linear-gradient(90deg, #0d6efd, #6f42c1);
}真正容易被忽略的是：渐变方向变更后，颜色过渡是否还自然 —— 比如 135deg 下蓝→紫是斜向流动，改成 90deg 后若容器宽高比极端（如超窄 banner），可能让过渡带压缩成一条线。这时候得配合 background-size 微调，但别动 background-position，否则在不同断点下对齐会错乱。
