Bootstrap 5 的 bg-gradient 类不支持渐变色标百分比的响应式控制，必须用媒体查询配合 background-image: linear-gradient() 手动实现；预设类如 bg-gradient-primary 是固定值且无 color-stop，断点类无效；需显式写出百分比色标并严格按断点重写整条声明。
Bootstrap 5 的 bg-gradient 类完全不支持渐变百分比（color-stop）的断点响应式控制——它连基础方向都不允许改，更别说在不同断点下动态调整 50%、70% 这类色标位置。必须用媒体查询 + background-image: linear-gradient() 手动覆盖。
为什么不能用 bg-gradient-primary 加断点类控制百分比
因为 bg-gradient-primary 是一个预编译死值：它内部固定写死为 background-image: linear-gradient(135deg, #0d6efd, #86b7fe)，没有任何 color-stop 位置（比如 50% #0d6efd, 50% #86b7fe），也没任何媒体查询包裹。加 d-md-none 或 md:bg-gradient-primary 都无效：md: 是 Tailwind 语法，Bootstrap 不识别；d-md-none 只隐藏元素，不是“关掉百分比”。
用 @media + linear-gradient() 精确写百分比
真正可控的方式是绕过所有工具类，直接对目标元素写 CSS，用媒体查询切换整条 linear-gradient() 声明。关键点：
- 小屏基础态必须先写明确的
background-color（如.hero { background-color: #fff; }），否则大屏渐变可能没 fallback - 百分比色标必须显式写出，例如
linear-gradient(90deg, #0d6efd 0%, #0d6efd 40%, #86b7fe 40%, #86b7fe 100%)表示蓝占前 40%，青占后 60% - 断点值严格用
@media (min-width: 768px)，对应 Bootstrap 5 的md，不能是767px或770px - 旧版 Safari 对
to right支持差，统一用角度（如90deg）+ 百分比色标最稳
常见百分比调整场景与写法
比如想实现「小屏纯蓝，中屏蓝→青硬切在 30% 位置，大屏软过渡在 60%」：
.hero {
background-color: #0d6efd;
}
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(90deg, #0d6efd 0%, #0d6efd 30%, #86b7fe 30%, #86b7fe 100%);
}
}
@media (min-width: 992px) {
.hero {
background-image: linear-gradient(90deg, #0d6efd 0%, #0d6efd 60%, #86b7fe 60%, #86b7fe 100%);
}
}
注意：每段媒体查询里都必须重写整条 background-image，不能只改百分比——CSS 不支持局部覆盖 color-stop。
移动端 Safari 和安卓 WebView 的坑
这些浏览器对 color-stop 格式敏感，容易把 50%, #000 解析错。务必写成 50% #000（无逗号），且至少两个色标。如果用了深色模式，@media (prefers-color-scheme: dark) 里也要单独配一套百分比逻辑，否则亮色系渐变在暗背景上文字可能不可读。
