.card-header 和 .card-footer 必须是 .card 的直接子元素，否则边框、背景、margin 全部失效；深色背景需手动加 text-white/text-light；内嵌内容应使用 d-flex+align-items-center；hover 样式需提高权重或用 CSS 变量。
.card-header 和 .card-footer 必须是 .card 的直接子元素
如果把 .card-header 写在 .card 外面，或者嵌套在 .card-body 里，样式会完全失效——边框、背景、上下 margin 全部丢失。这不是浏览器兼容问题，而是 Bootstrap 5 的 CSS 规则明确限定：只有 .card > .card-header 这种直接子选择器才生效。
常见错误写法：
<div class="card">
<div class="card-body">
<div class="card-header">错！被包在 body 里</div>
内容...
</div>
</div>
正确顺序只能是：
-
.card-header紧跟在.card开始标签后（推荐放在.card-body上方） -
.card-footer放在.card-body下方（顺序颠倒会导致 margin 叠加异常，底部间距变大） - 三者都必须是
.card的一级子元素，不能隔层
深色背景下的文字颜色不会自动反色
.card-header 加了 bg-dark 或 bg-primary，但文字还是默认黑色，看不清——这不是 bug，是 Bootstrap 5 的设计取舍：它只控制背景，不绑定文字颜色逻辑。
必须手动加配色类：
- 深色背景（
bg-dark、bg-primary等）配text-white或text-light - 浅色背景（
bg-light）默认文字可读，但若用text-muted会太淡，建议显式加text-dark - 避免直接写
color: white !important，容易污染全局；优先组合工具类
示例：
<div class="card-header bg-primary text-white">系统通知</div>
头部/尾部内嵌按钮或图标时对齐容易错乱
直接往 .card-header 里塞 <button></button> 或 <i></i>，常出现高度不一致、右侧按钮掉行、移动端文字换行挤占按钮空间等问题。根本原因是 .card-header 默认是 display: flex，但没设 align-items 和 justify-content，子元素按文档流渲染。
实操建议：
- 统一加
d-flex justify-content-between align-items-center控制主轴和交叉轴 - 图标用
me-2（不是已废弃的mr-2）留右间距 - 按钮加
btn-sm，字号匹配标题层级，避免视觉失衡 - 长标题需截断时，包裹一层
flex-grow-1 min-vw-0+text-truncate
示例：
<div class="card-header d-flex justify-content-between align-items-center"> <div class="flex-grow-1 min-vw-0"><h5 class="mb-0 text-truncate">用户管理面板</h5></div> <button class="btn btn-outline-secondary btn-sm">+ 新建</button> </div>
hover 样式覆盖不了内置背景类
写 .card-header:hover { background: #007bff; } 没反应？不是 JS 问题，是 CSS 权重不够——Bootstrap 的 .bg-primary 类带 !important，且选择器更具体（如 .card > .card-header.bg-primary）。
有效做法：
- 别用通用选择器，改用带命名空间的类，比如
.card-custom .card-header:hover - hover 时用 CSS 变量，例如
background-color: var(--bs-primary) !important，兼顾可维护性 - 项目用 Sass 的话，在
_variables.scss里扩展$theme-colors，比硬写颜色值更可控 - 绝对避免全局
!important覆盖，容易引发连锁样式冲突
真正难处理的不是怎么加 hover，而是如何让 hover 行为在深色模式、高对比度辅助设置下仍可访问——这点常被忽略。
