用 display: grid 最稳，一行代码让卡片天然等高；card-deck 因 display: table-cell 不支持断行且被 bootstrap 5 废弃，响应式下易溢出或错乱，应替换为 card-grid 类配合 grid-template-columns 和 gap 实现自适应等高布局。
直接用 display: grid 最稳，比 flex 填充、card-deck 或手动设 h-100 更可靠，且一行代码就能让卡片天然等高。
为什么 card-deck 在响应式场景下会失效
card-deck 本质是 display: table-cell，它强制所有卡片在同一行渲染，不支持断行——比如你希望小屏单列、中屏双列，card-deck 会把两张卡硬挤在一行里，导致溢出或文字折行错乱。它也无法嵌套在 row 或 container 之外的 flex/grid 容器中，一混用就失灵。
- 别把它当“等高解决方案”，只适合固定列数、无断点变化的静态展示
- Bootstrap 5 已废弃
card-deck和card-group，官方也不再维护其响应行为 - 如果已用，替换成本低：删掉
card-deck类，外层加class="card-grid"即可迁移
用 grid 实现响应式等高卡片的最小可行写法
核心不是给卡片加高度，而是让容器成为 grid，并交由浏览器自动拉齐子项高度。不需要 h-100、flex-fill 或 JS 计算。
- 外层容器加
display: grid和grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 必须移除所有卡片上的
height、min-height、flex相关样式（包括h-100）——它们会干扰 grid 的 stretch 行为 - 间隙用
gap: 1rem，比手动加mb-3或mx-n2更干净，且自动适配断行
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
卡片内部底部对齐仍错位？问题不在高度，在内容流
等高只是容器高度一致，不代表按钮、描述文字会自动对齐到底部。常见现象是文字短的卡片按钮上浮，文字长的被截断。
- 在
.card-body上加d-flex flex-column h-100 - 给主要文本容器（如
<p></p>）加flex-grow-1，让它撑开剩余空间 - 把按钮或 footer 放在最后，并确保它没设
margin-top—— 否则mt-auto会失效 - 避免在
.card上设padding，改用.card-body的p-3或py-4控制内边距
兼容性与容易被忽略的细节
Grid 在现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+）完全可用，但如果你的项目仍需支持 Safari 15 或旧版 Edge，注意两点：
-
auto-fit在 Safari 15.4–16.3 中对minmax()的解析有偏差，建议降级为auto-fill+ 显式列数（如repeat(4, minmax(280px, 1fr))） - 别在卡片上同时用
card-img-top和object-fit: cover+ 固定height，这会锁死卡片高度，破坏 grid 的 stretch 行为 - 如果用了
stretched-link，确保a是.card的直接子元素，否则点击区域失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
