bootstrap 5 原生不支持响应式斜向渐变，bg-gradient-* 类方向固定为135deg且无断点前缀，需用媒体查询配合linear-gradient()手动实现；md:bg-gradient-primary等是tailwind语法，bootstrap不识别。
Bootstrap 5 原生不支持响应式斜向渐变——所有 bg-gradient-* 类方向固定为 135deg（左上→右下），且无断点前缀；必须用媒体查询 + background-image: linear-gradient() 手动实现。
为什么 bg-gradient-primary 加 md: 或 d-md-block 不行
因为 md:bg-gradient-primary 是 Tailwind 语法，Bootstrap 5 完全不识别，CSS 规则不会生成；而 bg-gradient-primary d-none d-md-block 实际是隐藏整个元素，不是“关闭渐变”。小屏时你看到的是空白，不是纯色回退——这违背响应式渐变的设计本意。
-
bg-gradient-primary本身只注入background-image: linear-gradient(135deg, ...)，不带任何媒体查询 - 它必须搭配
bg-primary等颜色类才生效，单独写无效 - 若项目 SCSS 中设了
$enable-gradients: false，该类会静默失效，控制台无提示
用 @media (min-width: 768px) 控制斜向渐变的正确写法
Bootstrap 5 的 md 断点严格定义为 768px，不能写成 767px 或 770px。斜向方向优先用角度（如 135deg），比 to bottom right 兼容性更稳，尤其在旧版 Safari 中。
- 基础态（小屏）必须写在媒体查询外：
.hero { background-color: #f8f9fa; } - 仅在
md及以上覆盖background-image，不要用background简写，否则会清掉已有背景色或纹理 - 示例：小屏白底，
md+启用左上→右下蓝紫渐变
.hero {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
自定义带断点前缀的斜向渐变类（适合多处复用）
如果多个组件都要在 lg 断点启用 135deg 渐变，可定义 bg-lg-gradient-135 这类类名。注意它不是 Bootstrap 原生类，需手动补全，且必须加 !important 才能覆盖 bg-light 等自带 !important 的工具类。
- 使用 Sass 时推荐复用断点变量：
@include media-breakpoint-up(lg) { ... }，避免硬编码像素值 - 颜色建议引用 Bootstrap 调色板变量（如
$primary,$secondary），便于主题同步 - HTML 中 class 顺序很重要：
class="bg-lg-gradient-135 bg-white"——自定义类在前，降级纯色在后
斜向渐变没显示？先检查子元素是否盖住了它
渐变背景看不见，大概率不是 CSS 写错了，而是子元素（比如 .card、.btn、图片容器）设置了不透明背景色，把底层渐变完全遮住。
- 检查子元素是否用了
bg-white、bg-light或background-color: #fff—— 改成background-color: rgba(255, 255, 255, 0.95)留出透出空间 - 别给父容器设
z-index：没有position的元素，z-index无效 - 特别注意
.row：它默认有负外边距，实际渲染区域可能比视觉预期小，导致渐变被裁切
真正难的不是写对 135deg，而是确保它在各种断点、深色模式、不同设备上都稳定透出——子元素背景、文字对比度、Safari 的 color-stop 解析，这些细节一旦漏掉，渐变就等于没做。
