不能直接给.card设固定高度，因会导致内容溢出、图片变形、响应式失效；应通过.col+h-100+d-flex锚定高度基准，再由.card+h-100继承，配合.card-body+d-flex+flex-column+flex-grow-1实现内容弹性布局与底部对齐。
直接给 .card 加 height 会截断内容，不可取；真正可控的固定高度方案，是让卡片容器（.col）有明确高度基准，再通过 h-100 + d-flex + flex-column 向下传导并约束内部空间。
为什么不能直接给 .card 设 height: 300px
常见错误是写 style="height: 300px" 在 .card 上。这会导致：
- 文字多时溢出被隐藏，或出现滚动条（除非加
overflow: hidden，但体验差） -
.card-img-top被强行拉伸变形，object-fit: cover失效 - 响应式断点切换时，固定像素值无法适配不同屏幕，小屏上卡片显得臃肿
- 与 Bootstrap 的栅格流冲突——
.col本应由内容撑开，硬设高度会破坏 flex 布局的 stretch 行为
正确做法：用 .col + h-100 + d-flex 锚定高度基准
关键不是限制卡片本身，而是让它的父容器（即 .col）具备可继承的高度来源：
-
.col必须同时加d-flex和h-100—— 只有它成为 flex 容器，才能把高度作为“可用空间”传给子项 -
.row需有高度依据，比如加style="min-height: 400px"或依赖内容自然撑高；若全靠文字，.col的h-100仍会继承 0 -
.card加h-100，确保它填满.col的全部高度 - 避免在
.col上写height、min-height、overflow: hidden，这些会中断高度继承链
内部内容对齐到底部需要 flex-column + flex-grow-1
即使外部高度固定了，文字少的卡片里按钮仍会浮在中间。这不是靠 margin 解决的，得靠内部弹性分配：
-
.card和.card-body都必须加h-100，否则.card-body的 flex 没有高度参考 -
.card-body加d-flex flex-column h-100 -
.card-text加flex-grow-1，自动占据中间空白 - 按钮加
mt-auto（不是align-self-end），它更稳定，不受文字行数影响 - 若含
.card-img-top，建议统一设min-height: 180px或height: 180px，防止图片加载慢导致初始高度为 0，拉伸失效
响应式下高度突然“变矮”的排查重点
大屏正常、小屏卡片塌缩，90% 是以下原因：
- 媒体查询里重写了
.row的align-items，比如@media (max-width: 768px) { .row { align-items: flex-start !important; } } - 用了
.d-md-flex类，小屏退化为display: block，d-flex失效 -
.col在小屏被flex-basis或width干扰，导致其计算高度变小 - 图片异步加载完成前，
.card初始高度为 0，h-100拉的也是 0 —— 此时需用min-height兜底，比如.card { min-height: 250px; }
最易被忽略的一点：高度一致性不等于视觉一致性。等高只是容器高度相同，内部文字行高、图片比例、padding 差异依然会让卡片看起来“不整齐”。真要控制观感，得连 .card-title 行高、.card-body padding、.card-img-top 尺寸都统一处理，而不是只盯着 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
