Bootstrap 的 bg-gradient 类不支持混合比例控制，必须手写 linear-gradient() 并用媒体查询按断点设置色标位置（如 50% #0d6efd），严格对齐其断点值（768px、992px），注意 Safari 兼容性及子元素遮挡问题。
Bootstrap 的 bg-gradient 类根本不支持混合比例控制
它只提供固定方向（135deg）和预设颜色组合，没有 color-stop 位置、透明度或渐变长度调节能力。所谓“在断点处定义混合比例”，本质是误把 Tailwind 的 to-r/via 语法套用到 Bootstrap 上——md:via-blue-400 这类写法在 Bootstrap 中完全无效，CSS 规则压根不会生成。
想控制色标位置，必须手写 linear-gradient() 并用媒体查询包裹
混合比例即 color-stop 的百分比位置（如 50% #0d6efd），只能通过 background-image: linear-gradient() 显式声明。Bootstrap 工具类不参与这个过程，所以你得自己补 CSS：
- 小屏基础态先写
background-color，比如.hero { background-color: #f8f9fa; } - 中屏起用
@media (min-width: 768px)覆盖background-image，并写明色标位置：@media (min-width: 768px) { .hero { background-image: linear-gradient(135deg, #0d6efd 0%, #6f42c1 70%, #86b7fe 100%); } } - 移动端 Safari 对
50%, #000格式敏感，务必写成50% #000（空格分隔，无逗号） - 别用
background简写——它会清掉background-color回退，导致小屏空白
多个断点要不同混合比例？别硬编码像素值
如果要在 md 断点用 30%/70% 分割，在 lg 断点改成 20%/50%/100%，直接写两段媒体查询就行。但注意：
- 断点值必须严格对齐 Bootstrap 5 定义：
768px（md）、992px（lg），不能写770px或990px - 若项目用 Sass，优先调用
$grid-breakpoints变量：@include media-breakpoint-up(md) { .hero { background-image: linear-gradient(135deg, #0d6efd 0%, #6f42c1 70%); } } @include media-breakpoint-up(lg) { .hero { background-image: linear-gradient(135deg, #0d6efd 0%, #6f42c1 50%, #86b7fe 100%); } } - 每个媒体查询里的
background-image会覆盖前一个，无需手动重置
容易被忽略的兼容性细节
混合比例看似只是数值调整，但在旧版 Safari（iOS 15.4 之前）和部分 Android WebView 中，color-stop 解析极不稳定：
-
50% #000安全；50%, #000会被跳过，导致渐变断裂 - 避免写
to top right或to-r—— Bootstrap 不支持，且旧 Safari 只认角度（如45deg） - 如果容器里有
.card或其他带纯白背景的子元素，它们会完全盖住渐变——这不是比例没生效，而是视觉被遮挡 - 深色模式下，同一组色标位置可能因背景反差变弱，需额外加
@media (prefers-color-scheme: dark)重写色值
