使用 .card-header 和 .card-footer 时，必须作为 .card 的直接子元素，且顺序为 header→body→footer；它们提供预设边框、背景、间距及语义化结构，不可外置或嵌套错误，图片头尾组合需注意互斥规则。
怎么用 .card-header 和 .card-footer 添加头尾
直接加就行，不需要额外 js 或复杂嵌套。bootstrap 5 的 .card-header 和 .card-footer 是纯样式类，作用就是给卡片容器内特定区域套一层预设边框、背景和间距。
常见错误是把它们当成独立组件乱放——比如写在 .card 外面，或者没包在 .card 里就单独用，结果样式完全不生效。
-
.card-header必须是.card的**直接子元素**，且通常放在.card-body上方 -
.card-footer同样必须是.card的**直接子元素**，且推荐放在.card-body下方（顺序错乱会导致 margin 叠加异常） - 头部/底部内部可以放任意 HTML：标题、按钮、小字说明、图标等，但别再套
.card类
<div class="card">
<div class="card-header">最新动态</div>
<div class="card-body">
<h5 class="card-title">欢迎使用</h5>
<p class="card-text">这是正文内容</p>
</div>
<div class="card-footer"><small class="text-muted">2026-03-16 更新</small></div>
</div>
为什么不能只靠 .card-body 撑起头尾效果
.card-body 是内容区，它本身没有上下边框、无默认背景色、padding 也仅面向内部文本。如果你强行在 .card-body 里塞 <h6>头部</h6> 和 <footer>底部</footer>，看起来像头尾，但实际缺失三样关键东西：视觉隔离（边框/阴影）、语义标记（对屏幕阅读器不友好）、响应式间距控制（比如小屏下 header/footer 的 padding 会自动收缩，而手写的 div 不会）。
- 没有
.card-header，你就得自己写 CSS 控制 border-top、background、font-weight，还容易和主题色冲突 - 没用
.card-footer，text-muted这类辅助类在 footer 里有特殊垂直对齐逻辑，挪到别处会偏高或偏低 - 某些 Bootstrap 工具类（如
.bg-light配合.card-header）会自动微调圆角和阴影，单独用不生效
常见踩坑：图片+头尾组合时的结构错位
当卡片带图（.card-img-top）又需要 header 或 footer 时，顺序一错，整个布局就塌。
- ✅ 正确顺序：
.card-img-top→.card-header→.card-body→.card-footer - ❌ 错误顺序：
.card-header放在.card-img-top前面 → header 会被顶到图片上方，脱离卡片视觉边界 - ⚠️ 注意：
.card-img-top和.card-img-bottom**不能**和.card-header/.card-footer共存于同一层级；它们都是.card的直接子元素，但彼此互斥——要么选图+body，要么选图+header+body+footer，不能 header + img-top + footer + img-bottom
兼容性与自定义边界要注意什么
Bootstrap 5 默认的 .card-header 和 .card-footer 在 Safari 15.4+ 和 Chrome 108+ 表现一致，但在旧版 Firefox（如 102）中，如果父 .card 设置了 overflow: hidden（比如加了 .rounded），而 header/footer 内容超出高度，可能被意外裁剪——这不是 bug，是 CSS 规范行为。
- 若需支持老浏览器，避免在 header/footer 里放过高行内元素（如大图标+文字并排）
- 想改边框颜色？别直接覆盖
border，用.border-primary这类工具类更稳 - 去掉底部边距？别删
.card-footer的 margin，而是加mb-0类——因为它的 margin 是通过 Bootstrap 的 spacing 系统注入的，硬写 CSS 容易被后续版本覆盖
最常被忽略的是：header 和 footer 的文字大小默认比 body 小，且用了 font-weight: bold（header）和 font-weight: normal（footer），如果项目里全局重置了 font-weight，这两个地方会突然变细或变粗，得单独补一句 .card-header, .card-footer { font-weight: inherit; }。
