.card-footer背景色不生效，主因是Bootstrap默认样式含!important、深色模式覆盖、父级border-0/bg-transparent影响、CSS加载顺序错误；应优先使用bg-*工具类或内联style，避免直接写.bg-red等无效类。
Card页脚背景色不生效的常见原因
直接给 .card-footer 加 background-color 有时没反应，多半是因为 bootstrap 的默认样式带 !important（比如 v5.3+ 中部分主题变体），或者你用的是深色模式（data-bs-theme="dark"）触发了预设的暗色覆盖逻辑。
更隐蔽的情况是：父级 .card 启用了 border-0 或 bg-transparent，导致页脚背景被继承或重置；又或者你在自定义 CSS 中写在了 Bootstrap 样式表之前，被后加载的默认规则覆盖。
推荐做法：用内联 class 覆盖（最稳妥）
Bootstrap 5+ 提供了完整的背景工具类，优先用它们，避免手写 CSS 冲突。页脚本身是独立元素，可直接加背景类：
<div class="card"> <div class="card-body">内容</div> <div class="card-footer bg-success text-white">成功状态页脚</div> </div>
可用的背景类包括：bg-primary、bg-warning、bg-dark、bg-light，也支持 bg-opacity-75 控制透明度。注意搭配 text-white 或 text-dark 保证文字可读。
- 不要只写
bg-red—— Bootstrap 没有这个类，得用bg-danger或自定义 - 如果要用非标准色（比如
#6a5acd），建议用style="background-color: #6a5acd;"内联写，比外部 CSS 更高优先级 - 深色模式下，
bg-light可能仍显灰，此时需配合data-bs-theme="light"强制主题，或用bg-body-secondary这类语义类
需要全局统一修改？改 Sass 变量或重写 CSS
如果你在用 Bootstrap 源码（Sass），最干净的方式是覆盖 $card-footer-bg 变量，然后重新编译：
// 自定义变量文件中 $card-footer-bg: #4b5563; @import "bootstrap/scss/bootstrap";
若只能用 CDN 或已编译 CSS，则必须提高选择器权重：
.card > .card-footer {
background-color: #4b5563 !important;
}
但要注意：!important 在组件库混用时容易失控，尤其当项目还引入了其他 UI 框架时。不如在页脚上加一个自定义 class（如 custom-footer），再单独写：
.custom-footer {
background-color: #4b5563;
}
为什么用 .card-footer 而不是 .card .footer？
Bootstrap 的页脚类名就是 .card-footer，不是通用的 .footer。写成 .card .footer 完全不匹配，样式不会生效。另外，.card-footer 默认有 padding 和 border-top，改背景时如果想隐藏边框，得额外加 border-0：
<div class="card-footer bg-info border-0"></div>
还有个易忽略点：某些卡片组件（如 card-group 或第三方封装）可能把页脚渲染成 <footer></footer> 标签但没加 .card-footer 类——这时样式根本不会应用，得先检查 DOM 结构是否符合 Bootstrap 预期。
