bootstrap 5+的.card-header不自动适配文字颜色，需手动添加text-white等类；布局需用d-flex等工具类微调；hover样式需提高选择器权重；移动端应配合min-vw-0和text-truncate防换行错乱。
Card头部加背景色但文字不跟着变白？
Bootstrap默认的.card-header在深色背景（比如bg-dark）下，文字不会自动反色，容易看不清。这不是bug，是Bootstrap 5+有意设计：它只控制背景，不强制配色逻辑。
实操建议：
- 手动加
text-white或text-light类，别依赖“自动适配” - 如果用
bg-gradient，务必测试文字对比度，WCAG AA级要求至少4.5:1 - 避免直接覆盖
.card-header的color，否则可能影响所有卡片——优先用工具类组合
示例：
<div class="card-header bg-primary text-white">重要通知</div>
想让Card头部带图标或按钮但不破坏结构？
常见错误是把button或i直接塞进.card-header后乱排版，导致高度撑开、对齐错位，或者响应式失效。
原因在于.card-header默认是display: flex，但没设align-items和justify-content，子元素会按默认流渲染。
实操建议：
- 用
d-flex justify-content-between align-items-center微调布局 - 图标用
me-2（不是mr-2，Bootstrap 5已弃用mr）留出右间距 - 按钮加
btn-sm，避免比标题字号大，破坏视觉层级
示例：
<div class="card-header d-flex justify-content-between align-items-center"> <h5 class="mb-0">用户列表</h5> <button class="btn btn-outline-secondary btn-sm">+ 添加</button> </div>
需要悬停时头部变色，但CSS写法总被覆盖？
直接写.card-header:hover { background: #007bff; }经常无效——因为Bootstrap的.bg-*类带!important，且作用域更具体。
根本原因是选择器权重不够，不是“没生效”，而是被更高优先级规则压掉了。
实操建议：
- 用内联
style写hover太重，改用自定义class +:hover伪类，且提高选择器特异性，比如.card-custom .card-header:hover - 避免用
!important硬顶，改用background-color: var(--bs-primary) !important这种变量引用，兼顾可维护性 - 如果项目用Sass，直接在
_variables.scss里扩展$theme-colors，比写死颜色更可控
移动端Header文字换行错乱或截断？
小屏幕下，长标题+右侧按钮常出现文字挤成一团、按钮掉到下一行、甚至ellipsis不触发——本质是Flex容器没设flex-wrap和文本溢出控制。
实操建议：
- 给标题包裹
<div class="flex-grow-1 min-vw-0"><h5 class="mb-0 text-truncate">超长标题会自动省略</h5></div> -
min-vw-0是关键：它重置min-width: auto的默认行为，让text-truncate真正生效 - 不要对
.card-header设white-space: nowrap，否则整块内容无法折行，反而更难读
复杂点在于：不同设备宽度下，标题长度、按钮数量、图标尺寸都在变，纯CSS方案很难100%覆盖。最稳的做法是服务端或JS根据内容长度动态加/删text-truncate——但多数场景，用min-vw-0 + text-truncate已够用。
