Bootstrap不支持bg-*@sm等响应式背景类，需用d-none/d-md-block组合实现层叠切换，或SCSS扩展bg-primary-sm类，亦可用JS动态监听窗口宽度切换class。
Card背景色如何响应式切换断点
Bootstrap本身不提供bg-*@sm这类响应式背景工具类，直接写bg-primary bg-dark@md会无效——这是新手最常卡住的地方。
必须用Bootstrap内置的响应式工具类组合，或借助CSS媒体查询手动扩展。核心思路是：利用bg-*类的叠加与覆盖机制，配合d-none d-md-block等显示控制类间接实现“条件渲染”效果。
用display工具类模拟响应式背景切换
适用于简单场景，比如只在md及以上显示深色背景，小屏回退为浅色。关键在于让两个div层叠，用d-类控制显隐：
<div class="card">
<div class="card-body bg-light d-block d-md-none"></div>
<div class="card-body bg-dark d-none d-md-block"></div>
<div class="card-body p-0">
<!-- 实际内容放这里，避免重复padding -->
</div>
</div>-
d-block d-md-none在xs/sm生效，d-none d-md-block在md及以上生效 - 两个背景层需共用
card-body语义，但去掉默认padding（由最外层统一控制） - 不能直接给
.card加bg-*，否则会被子层覆盖或冲突
自定义响应式bg-*类（推荐长期项目）
如果需要频繁使用，建议在SCSS中扩展。Bootstrap 5.3+支持@each遍历断点生成：
@each $breakpoint, $value in map-get($grid-breakpoints, 'breakpoints') {
@include media-breakpoint-up($breakpoint) {
.bg-primary-#{$breakpoint} { background-color: #0d6efd !important; }
.bg-success-#{$breakpoint} { background-color: #198754 !important; }
}
}编译后就能用bg-primary-sm、bg-success-lg等类，且天然支持!important确保覆盖默认样式。
- 注意：必须在
bootstrap.scss导入之后再定义，否则变量未加载 - 不要用
bg-primary d-md-bg-dark这种伪类名——Bootstrap不识别d-md-bg-前缀 - 若用CDN引入，只能靠外部CSS或JS动态切换class，灵活性下降
用JavaScript监听resize动态切换（兼容旧版或复杂逻辑）
当背景色需依赖用户行为（如主题切换）或计算值时，JS更可控：
function updateCardBg() {
const card = document.querySelector('.my-card');
const width = window.innerWidth;
card.classList.remove('bg-primary', 'bg-warning', 'bg-dark');
if (width < 576) card.classList.add('bg-light');
else if (width < 768) card.classList.add('bg-primary');
else if (width < 992) card.classList.add('bg-warning');
else card.classList.add('bg-dark');
}
window.addEventListener('resize', updateCardBg);
updateCardBg(); // 初始化- 务必调用一次
updateCardBg()初始化，否则首屏不生效 - 避免在
resize里频繁操作DOM，此处仅切换class，性能可接受 - 移动端Safari可能触发多次resize，可加节流，但简单卡片通常不需要
真正麻烦的不是写法，而是背景色和文字色的对比度是否达标——比如bg-dark配默认text-white没问题，但换成bg-warning就得同步加text-dark，这点容易被忽略。
