Card头部按钮必须放在.card-header内部，不能脱离语义容器
直接把<button>塞进.card但不在.card-header里，样式会错乱、对齐失效、响应式断层。bootstrap 的.card-header不是装饰类，它自带display: flex、上下边框、垂直居中逻辑和主题间距——这些是按钮能“长在头部”的前提。
- 错误写法：
<div class="card"><button class="btn">操作</button><div class="card-body">...</div></div>→ 按钮脱离 header 上下文，无法继承 padding 和对齐规则 - 正确结构：按钮必须是
.card-header的子元素，且.card-header必须是.card的**直接子元素** - 如果用了
.card-img-top，顺序必须是：.card-img-top→.card-header→.card-body，否则按钮会被顶到图片外
用d-flex + justify-content-between实现标题左对齐、按钮右对齐
默认.card-header是 flex 容器，但没设主轴/交叉轴对齐方式，按钮容易堆在左边或换行。靠float:right或text-align:right会破坏 flex 流，小屏下极易错位。
- 加
d-flex justify-content-between align-items-center让标题和按钮自动分占两端 - 图标用
me-2（不是mr-2，后者在 Bootstrap 5+ 已废弃）留出右侧间距 - 按钮统一加
btn-sm，避免字号大于标题造成视觉层级混乱 - 别给
.card-header设height或line-height，会挤压内部元素垂直空间
示例：
<div class="card-header d-flex justify-content-between align-items-center"> <h5 class="mb-0">用户管理</h5> <button class="btn btn-outline-primary btn-sm">+ 新建</button> </div>
悬停变色时:hover样式被bg-* 类覆盖？提高选择器权重或改用工具类组合
写.card-header:hover { background-color: #007bff; }经常无效，因为 Bootstrap 的.bg-primary等类带!important，或者你没覆盖到实际生效的背景属性（比如background vs background-color）。
- 优先用工具类组合，比如
bg-light hover:bg-primary text-dark hover:text-white（需配合 Bootstrap 5.3+ 的 hover 工具类扩展，或自行添加） - 若必须写 CSS，选择器至少写成
.card .card-header:hover，比.bg-primary的权重高 - 测试深色背景下的文字可读性：WCAG AA 级要求对比度 ≥4.5:1，
bg-dark配text-white安全，但bg-gradient得手动测 - 避免全局覆盖
.card-header的color，否则所有卡片文字颜色都会变
移动端按钮错位、文字换行？加min-vw-0和text-truncate保结构
小屏下按钮文字过长、标题不截断，会导致.card-header高度撑开、flex 子项溢出、按钮被挤到下一行——这不是 bug，是 flex 默认min-width: auto在窄视口下的自然行为。
- 给标题包裹的元素（如
<h5>）加min-vw-0，允许其收缩 - 加
text-truncate防文字溢出，配合white-space: nowrap（该类已内置） - 按钮别用
flex-fill填满剩余空间，它在.card-header里响应不稳定，尤其文字长度不一时会拉伸容器 - 如果按钮需固定宽度（如图标按钮），用
w-px-32这类自定义宽度类，而非col栅格
