bootstrap 的 bg-gradient 类不支持色标位置控制，所有内置类仅生成固定线性渐变；必须手写 background-image: linear-gradient() 并用百分比或长度指定色标，配合媒体查询实现响应式渐变。
Bootstrap 的 bg-gradient 类根本不支持中止位置控制
直接写 bg-gradient-primary 或加任何断点前缀（比如 md:bg-gradient-primary），都无法调整渐变的色标（color stop）位置。Bootstrap 5 所有内置渐变类只生成固定格式的 background-image: linear-gradient(135deg, #0d6efd, #86b7fe)，两个颜色硬编码、无中间停靠点、无百分比控制——它连基础的 50% #000 都不支持。
必须用 background-image: linear-gradient() 手写色标位置
想让蓝→紫渐变在 30% 处切到紫色、70% 处再切回蓝色，就得放弃所有 bg-gradient-* 工具类，自己写媒体查询 + 精确色标。关键不是“怎么加断点”，而是“怎么写对渐变语法”：
- 色标必须用
position（如30%、70%）或length（如100px），不能只写颜色 - 至少两个色标才叫渐变；只写一个就是纯色，哪怕带
% - 移动端 Safari 对
50%, #000这种逗号分隔写法敏感，改用50% #000更稳 - 方向统一用角度（如
90deg），别用to right——旧版 Safari 不认缩写
示例：仅在 md（≥768px）启用从左到右、30% 蓝 → 70% 紫的渐变：
@media (min-width: 768px) {
.hero-section {
background-image: linear-gradient(90deg, #0d6efd 30%, #6f42c1 70%);
}
}
断点与色标要分开控制，别混在一起
有人试图在小屏用 0% #fff, 100% #fff“模拟关闭”，这是错的——它仍是渐变，只是视觉上像纯色，且会干扰文字可读性、增加渲染开销。正确逻辑是：
- 小屏（基础态）只设
background-color，不碰background-image - 大屏用
@media单独覆盖background-image，保留原有background-color作为降级 fallback - 如果同时要适配深色模式，得再套一层
@media (prefers-color-scheme: dark)，重写色标值，不能指望变量自动切换
容易被忽略的是：色标位置一旦写死（比如 30%），在窄屏下若容器高度突变，视觉落点会偏移。真要动态对齐，得用 JS 监听 resize 并重算百分比——但绝大多数场景，固定色标 + 合理断点已足够。
