卡片容器必须设 display: flex 和 flex-direction: column，min-height 设在 .card 上，按钮用 margin-top: auto 锚定底部且为直接子元素，统一 padding、font-size 和 box-sizing:border-box 确保尺寸一致。
卡片容器必须启用 flex-column 布局
按钮要统一到底部且尺寸一致，前提是卡片本身能“撑开高度”并提供明确的主轴方向。直接给 .card 加 display: flex; flex-direction: column 是必要前提——否则 margin-top: auto 或 justify-content: space-between 都无效。
-
min-height要设在.card上（不是.card-body），否则 flex 无法分配剩余空间 - 避免同时设置
height: 320px和min-height，前者会强制截断内容，后者更安全 - 若卡片由 Grid 或 Bootstrap 列包裹，需确认父容器未限制子项高度（如
overflow: hidden）
按钮尺寸统一靠 padding + font-size + box-sizing
固定宽高（width: 150px; height: 40px）看似简单，但响应式场景下容易错位或溢出。更稳妥的方式是用内边距和字体控制尺寸，再用 box-sizing: border-box 统一计算逻辑。
-
padding: 12px 24px比单纯设height更兼容不同字号和行高 -
font-size: 1rem配合line-height: 1.2可避免按钮因文本换行而撑高 - 务必加
box-sizing: border-box，否则border和padding会额外增加按钮总尺寸 - 禁用
white-space: nowrap（除非确定文本绝不会超长），否则小屏下会横向溢出
底部锚定优先用 margin-top: auto
比起嵌套两层 flex + justify-content: space-between，单层 flex-column 容器里对按钮用 margin-top: auto 更轻量、容错性更强，且不依赖内部结构是否包裹文字区。
-
margin-top: auto在 flex column 中会吃掉所有剩余主轴空间，把按钮“顶”到底部 - 按钮必须是
.card的直接子元素（即<img>、<div class="card-content">、<button>平级） - 不要给按钮加
position: absolute或margin-top: 20px，这会让它脱离 flex 流程，失去对齐能力 - 如果按钮前还有其它元素（比如标签、图标），它们也得是 flex item，否则
margin-top: auto会失效
多卡片网格中按钮对齐失败的常见原因
即使单张卡片按钮到底部了，网格中仍可能高低不一——问题通常不出在按钮本身，而在卡片高度不一致或基线干扰。
立即学习“前端免费学习笔记（深入）”；
- 所有卡片必须有相同
min-height，且该值大于最长内容所需高度（实测建议比最长卡片高 20–30px） - 图片没设
max-height或object-fit: cover会导致卡片高度浮动 - Bootstrap 的
.card-body默认是flex: 1，但如果外层没设height: 100%，它就不会拉伸填满 - 文字行高（
line-height）差异会影响padding视觉占比，建议全卡片统一设line-height: 1.4
.row 或 .grid）若没设 height: 100% 或没触发 BFC，min-height 就可能失效，导致 flex 布局“没地方撑”。 
