Bootstrap 的 bg-gradient 类不支持 background-repeat，必须手写媒体查询配合 repeating-linear-gradient() 实现断点下渐变重复；小屏设 no-repeat，大屏（≥768px）覆盖为 repeat，并注意深色模式与移动端 Safari 兼容性。
Bootstrap 的 bg-gradient 类根本不支持 background-repeat 控制
直接加 bg-gradient-primary 或任何变体，它生成的 background-image: linear-gradient(...) 是单次填充、不可重复的——CSS 中 linear-gradient() 本身就不接受 repeat 参数。你没法用 Bootstrap 工具类让渐变“平铺”或“重复”，更别说按断点切换重复方式了。
想在特定断点启用 repeatable 渐变？只能手写 background-image + background-repeat
真正可控的做法是绕过所有 bg-gradient-* 类，对目标元素直接写媒体查询，并用 background-image 配合 background-repeat 组合控制。注意三点：
-
background-repeat必须和background-image同时设置，且不能用background简写——否则会清掉background-color回退逻辑 - 要实现“小屏不重复、大屏平铺”，基础态（小屏）先设
background-repeat: no-repeat，再在@media (min-width: 768px)里覆盖为repeat或repeat-x - 重复的渐变不是靠
linear-gradient()，而是用repeating-linear-gradient()；例如：background-image: repeating-linear-gradient(90deg, #0d6efd, #0d6efd 10px, #6f42c1 10px, #6f42c1 20px)
常见错误：误以为 d-md-none 或 bg-gradient-md 能控制重复行为
这些都无效：
-
d-md-none只隐藏整个元素，跟background-repeat无关 -
bg-gradient-md不是 Bootstrap 原生类，写了也不会生效；Bootstrap 5 官方 CSS 文件里压根没定义带断点前缀的渐变类 - 试图在 SCSS 中改
$enable-gradients: true也无用——它只开关是否生成bg-gradient-*类，不涉及repeat逻辑
深色模式 + 断点 + 重复渐变，三者叠加时最容易漏掉的点
当你写了 @media (min-width: 768px) 控制重复，别忘了深色模式需要单独适配：
-
@media (prefers-color-scheme: dark) and (min-width: 768px)必须重写整个background-image和background-repeat，否则亮色重复条纹在暗背景上可能完全不可读 - 移动端 Safari 对
repeating-linear-gradient()支持较弱，建议用固定像素单位（如10px）而非百分比或em，避免渲染错位 - 如果容器有
padding或子元素设置了background-color（比如.card），重复渐变会被盖住——得把子元素背景设为transparent或rgba(..., 0.9)
