<p>bg-gradient-primary 单独无效，需搭配 bg-* 类（如 bg-primary）；卡片默认白色背景会遮盖渐变，子元素背景色、边框、阴影也影响显示；响应式需用媒体查询控制，避免简写 background；文字对比度与深色模式须兼顾，推荐语义化自定义类并加 !important。</p>
为什么直接加 bg-gradient-primary 到卡片没效果
因为 bg-gradient-primary 本身只是个“渐变开关”，它必须和至少一个 bg-* 类（比如 bg-light）同时存在，Bootstrap 才会注入 background-image: linear-gradient()。但卡片（.card）默认有白色背景（background-color: #fff），这个纯色会盖住渐变——不是渐变没加载，而是被遮住了。
-
bg-gradient-primary单独用无效；必须配bg-primary或bg-dark等颜色类 - 卡片内部子元素（如
.card-body、.card-title）常自带background-color，会进一步覆盖容器渐变 - 如果用了
border或box-shadow，视觉上也可能弱化渐变层次
怎么让渐变只在 md 及以上生效
Bootstrap 的 bg-gradient-* 类不支持断点前缀（如 md:bg-gradient-primary 是 Tailwind 写法，Bootstrap 不认）。真正响应式控制得靠媒体查询写 background-image，并确保小屏回退为纯色。
- 基础态先设
background-color: #f8f9fa（小屏 fallback） - 再用
@media (min-width: 768px)覆盖background-image: linear-gradient(135deg, #0d6efd, #6f42c1) - 方向优先用角度（
135deg），比to right兼容性更稳，尤其对旧版 Safari - 别用
background: linear-gradient()简写——它会清掉已有background-color，导致小屏空白
卡片文字看不清？这不是渐变的问题，是对比度断裂
浅色渐变配默认 text-dark，或深色渐变配 text-light，都极易跌破 WCAG 4.5:1 对比度标准。移动端阳光下几乎不可读，不是样式失效，是可访问性没跟上。
- 深渐变（如蓝紫）配
text-white；浅渐变（如浅蓝→浅灰）配text-dark - 别依赖纯改文字色，用伪元素叠加半透明遮罩：
.card::before+rgba(0,0,0,0.2) - 子卡片内容（如
.card-body）若设了background-color: white，会完全盖住底层渐变——改为background-color: rgba(255,255,255,0.9) - 深色模式下，需额外加
@media (prefers-color-scheme: dark)重写渐变色值，否则用户切主题后仍看到亮色渐变
自定义类名怎么起才好复用
如果你多个卡片都要“仅 md+ 渐变”，硬写媒体查询太重复。可以定义一个语义清晰的类名，比如 bg-md-gradient-card，并在 CSS 中统一维护。
- 类名建议带断点标识（如
md）和用途（如card），避免和 Bootstrap 原生类冲突 - 定义时用
background-image，不碰background简写，确保不影响已有背景色 fallback - 务必加
!important：Bootstrap 的.card基础样式权重高，不加容易被忽略 - 使用时顺序很重要：
class="bg-md-gradient-card bg-light"—— 自定义类在前，保底色类在后
