按钮底对齐的关键是统一使用flex布局锚定，而非调节按钮自身高度或依赖margin-top/absolute定位；需确保卡片容器设flex-column、有min-height、按钮为直接子元素，并避免混用不同布局机制。
按钮视觉高度不一致，本质不是按钮本身高矮问题，而是它在卡片内的垂直位置浮动——解决它，关键不是调 button 的 height 或 line-height，而是控制它在整个卡片布局中的锚定方式。
为什么给 button 加 margin-top 不可靠
常见做法是给按钮加 margin-top: auto 或固定值（如 margin-top: 24px），但前者依赖父容器是 flex 容器且方向为 column，后者在标题行数变化时立刻失效。更隐蔽的问题是：如果卡片用了 position: absolute 把按钮钉在底部，而父容器没设 position: relative 或没显式定义高度，按钮会脱离文档流、叠到其他卡片上，或被截断。
-
margin-top: 24px只对内容高度相近的卡片有效，一卡两行字、一卡五行字，按钮就错开 -
position: absolute; bottom: 0要求父容器有明确高度（height或min-height），否则按钮“掉出”卡片区域 - Bootstrap 的
d-flex justify-content-center套在按钮上，若父级不是 flex 容器，该类完全不生效
用 flex-direction: column + margin-top: auto 真正生效的条件
这个组合最轻量、兼容性好（IE11+），但必须满足三个前提，缺一不可：
-
.card或.card-body必须设display: flex且flex-direction: column -
.card或.card-body需要能撑开高度——不能靠内容自然撑高，得有height: 100%或min-height（比如min-height: 280px） - 按钮必须是该 flex 容器的直接子元素；如果按钮藏在
<div class="card-footer">里，就得把mt-auto加到.card-footer上，而不是按钮本身
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="card d-flex flex-column" style="min-height: 300px;">
<img src="..." class="card-img-top">
<div class="card-body d-flex flex-column">
<h5 class="card-title">标题</h5>
<p class="card-text">描述文本</p>
<button class="btn btn-primary mt-auto">查看详情</button>
</div>
</div>
多卡片等高 + 按钮底对齐，别碰 height: xxxpx
给每张卡片硬写 height: 320px 看似简单，但响应式断点下会出问题：小屏时文字换行更多，内容溢出；大屏时又留白过多。真正健壮的做法是让卡片高度由 flex 布局自动拉伸，而非人工指定。
- 父容器（如
.row或.cards-grid）设display: flex，子卡片自动等高（前提是没设height/max-height） - 卡片内用
flex: 1给内容区（如.card-body），比单纯height: 100%更稳——它会主动吃掉剩余空间 - 按钮加
mt-auto后，如果还想居中水平，用align-self-center（flex 子项属性），别用text-center包裹按钮，那会干扰 flex 对齐逻辑
最容易被忽略的一点：所有卡片必须用同一套 flex 嵌套层级。混用 position: absolute 和 margin-top: auto 的卡片，在同一列表里会互相破坏 baseline 对齐——视觉上按钮还是参差不齐，只是原因从“内容高度不同”变成了“布局机制不统一”。
