CardHeader 样式不生效是因为 Bootstrap 原生无 CardHeader 类，必须使用小写带短横线的 card-header；大小写或拼写错误、插入位置不当、RTL 模式干扰、自定义覆盖等均会导致失效。
CardHeader 样式不生效？检查是否用了 card-header 类而非 CardHeader
Bootstrap 本身没有 CardHeader 这个类名（也不是 React Bootstrap 或 Vue Bootstrap 的内置组件名），纯 CSS 版本里卡片头部必须用 card-header —— 多一个大写、少一个短横线，样式就完全不会挂载。常见错误是照着某些 UI 库文档抄错了类名，或者误以为 Bootstrap 原生支持类似 CardHeader 的语义化标签。
正确写法是：
<div class="card"> <div class="card-header">这是头部</div> <div class="card-body">内容区</div> <div class="card-footer">这是底部</div> </div>
-
card-header和card-footer是 Bootstrap 5+ 官方支持的固定类名，大小写敏感，不能写成CardHeader、cardHeader或card-header-wrapper - 如果用了 Sass 版本，确保没意外覆盖了
.card-header的padding、background-color或border-bottom - 自定义样式时，优先用
!important要谨慎——更推荐在.card-header后追加修饰类，比如card-header-primary
想让 card-header 自适应高度或居中文字？别只靠 text-center
text-center 只控制内联文本对齐，不影响 card-header 自身高度、行高或垂直居中。实际项目中常遇到标题文字被顶部挤出、多行时上下留白不均的问题。
- 单行标题：加
h6标签并配合mb-0消除默认 margin，再用d-flex align-items-center实现垂直居中 - 多行标题：用
min-height+display: flex+flex-direction: column+justify-content: center更可靠 - 避免直接改
line-height—— 它会破坏响应式断点下的字体缩放行为
card-footer 怎么和 card-header 保持视觉一致？注意边框与背景的继承逻辑
card-footer 默认有 border-top，而 card-header 是 border-bottom；两者背景色默认都继承自 card 的 background-color，但如果你给 card 设了透明背景（比如 bg-transparent），card-header 和 card-footer 就会变透明，容易被忽略。
- 统一风格最简方式：给父级
.card加border-0，然后单独为.card-header和.card-footer加border-bottom/border-top和同色bg-light - 如果用了
bg-dark卡片，card-header文字会自动变白（Bootstrap 5 的 color contrast 逻辑），但card-footer不会——得手动加text-white - 不要依赖
card-header的font-weight值去匹配 footer，二者默认值不同（header 是600，footer 是400）
用 JavaScript 动态插入 card-header 时样式丢失？检查 DOM 插入时机
用 innerHTML 或 append() 动态添加带 card-header 的 HTML 片段后，发现样式没应用，大概率是因为你把 HTML 字符串拼错了，或者插入到了非 .card 容器内。
- 确认插入目标是
div.card元素，而不是它的子元素（比如插进.card-body里） - 字符串中漏了空格会导致类名连在一起，例如
"card-headertext-center"—— 必须是"card-header text-center" - 如果用的是 Bootstrap 5 的 RTL 模式，
card-header的border-bottom可能被 RTL 工具类覆盖，需显式重置border-bottom-width
复杂点在于：card-header 和 card-footer 的样式耦合度比表面看起来高——改一个的 padding，另一个的视觉节奏就可能断裂；边框颜色、圆角、阴影这些细节，最好统一通过自定义 CSS 变量（如 --bs-card-header-padding-y）来调控，而不是零散覆盖。
