Card页脚按钮必须用.card-footer包裹，不可直接置于.card-body内或与卡片同级；正确结构为.card > .card-footer > .btn，且需用w-100或col-*控制响应式宽度，保留:focus-visible和aria-disabled保障可访问性。
Card 页脚按钮必须用 .card-footer 包裹
bootstrap 的 .card 结构对页脚有明确语义要求：按钮不能直接塞进 .card-body 底部，也不能用 .card-text 或空 div 模拟。只有加了 .card-footer 类的容器，才能正确继承边距、内边距、背景色和垂直对齐逻辑。
常见错误是把按钮写在 .card-body 里还加 mt-auto 想“顶到底部”，结果在不同屏幕尺寸下错位、被截断，或和文字挤在一起。
-
.card-footer默认带padding: 0.75rem 1.25rem和浅灰背景，适合放按钮组 - 如果不需要背景色，可覆盖
background-color: transparent，但别删类名——否则响应式间距会失效 - 多个按钮建议用
.d-flex+.gap-2控制间距，别依赖mr-2/me-2手动调
按钮要放在 .card-footer 内部，不是同级
结构错误会导致样式断裂或 Flex 布局失效。比如写成 .card > .card-body 和 .card > .btn 并列，按钮就脱离了卡片的 footer 流式上下文。
正确层级必须是：.card > .card-footer > .btn（或 .btn-group）。
- 错误示例：
<div class="card"> <div class="card-body">...</div> <button class="btn btn-primary">提交</button> </div>
- 正确示例：
<div class="card"> <div class="card-body">...</div> <div class="card-footer"> <button class="btn btn-primary">提交</button> <button class="btn btn-outline-secondary">取消</button> </div> </div>
响应式按钮宽度控制：用 col-* 或 w-100，别靠 width: 100%
在小屏上按钮常被压缩变形或换行错乱，本质是没处理好父容器 .card-footer 的 flex 行为。直接写 style="width: 100%" 会破坏 Bootstrap 的 CSS 变量继承和主题适配。
- 单按钮填满页脚：加
w-100类即可，简洁且兼容暗色模式 - 双按钮等宽并排：给每个按钮加
col-6，再在外层套row（.card-footer默认不是 flex 容器，需显式支持） - 避免用
flex-fill—— 它在.card-footer下表现不稳定，尤其遇到图标或文字长度不一时容易撑开容器
点击后状态反馈别漏掉 :focus-visible 和禁用态
很多项目只写了 :hover，但键盘用户按 Tab 进入按钮时没焦点样式，或提交中没设 disabled，导致重复点击提交。
- 确保按钮有
type="button"或type="submit"，别裸写<button></button>（默认是 submit，可能意外触发表单） - JS 中设置禁用态时，除了
btn.disabled，记得同步加aria-disabled="true" - 不要覆盖
outline为none—— Bootstrap 5 的:focus-visible依赖它做可访问性聚焦提示
.card-footer 和 .card-body 的 padding 差异带来的视觉节奏断裂。比如文字内容少时，页脚按钮会显得“悬空”。这时候与其调 margin-top，不如检查是否误删了 .card-header 或用了不匹配的 .card-title 行高。
