Bootstrap不支持bg-*@sm等响应式背景类，须用媒体查询或d-none/d-sm-block分层叠加实现；推荐CSS媒体查询严格对齐断点值（576px、768px等），或通过多层定位卡片配合可见性工具类切换背景色。
Card背景色如何响应式切换断点
Bootstrap本身不提供bg-*@sm这类响应式背景工具类，直接写bg-primary bg-dark@md会失效——这是最常踩的坑。必须用CSS媒体查询或Bootstrap的可见性工具类组合实现。
用bg-*配合d-none d-md-block分层叠加
核心思路是：把多个<div class="card">叠在一起，每层只在对应断点显示，背景色各不相同。比改CSS更轻量，且完全基于Bootstrap内置类。
- 外层用
position-relative包裹，内部卡片设position-absolute top-0 start-0 w-100 h-100 - 第一层加
d-block d-sm-none bg-light（超小屏用浅色） - 第二层加
d-none d-sm-block d-md-none bg-white（小屏白底） - 第三层加
d-none d-md-block bg-dark（中屏及以上深色）
注意：所有层必须有相同尺寸和定位基准，否则视觉错位；h-100依赖父容器高度，若卡片高度不固定，建议显式设min-height。
用CSS自定义响应式background-color
如果卡片结构复杂、层数多，或者需要精确控制颜色值（比如渐变或透明度），直接写CSS更可控。Bootstrap 5.3+ 的--bs-breakpoint-* CSS变量可直接引用。
.card-responsive-bg {
background-color: #f8f9fa; /* xs */
}
@media (min-width: 576px) {
.card-responsive-bg {
background-color: #e9ecef; /* sm */
}
}
@media (min-width: 768px) {
.card-responsive-bg {
background-color: #dee2e6; /* md */
}
}
@media (min-width: 992px) {
.card-responsive-bg {
background-color: #343a40; /* lg */
}
}关键点：min-width必须严格对齐Bootstrap断点值（576px、768px、992px、1200px），否则会出现断点错位；不要用max-width做反向判断，容易重叠。
为什么不能直接用bg-primary@md这类写法
因为Bootstrap的工具类生成逻辑里，@不是合法CSS标识符，所有带@的类名都不会被编译进CSS文件。你看到的类似写法，要么是第三方插件扩展，要么是文档误写。官方只支持d-*、flex-*等少数响应式前缀，bg-*不在其中。
真正要省事，就老实用两套DOM或一段CSS——没有“一行解决”的魔法语法。断点越多，DOM层数越难维护；颜色越精细，CSS越不可少。别指望靠class拼凑出全部响应逻辑。
