bootstrap卡片按钮贴底不生效，根本原因是.card默认position: static，需设position: relative；若按钮在.card-body内则需给该容器设relative；推荐用flex布局（.d-flex.flex-column.mt-auto）替代absolute定位更健壮。
Bootstrap卡片里按钮贴底不生效？检查父容器定位模式
绝对定位的 position: absolute 要生效，父容器必须是「定位上下文」——也就是 position 值不能是默认的 static。Bootstrap 5 的 .card 默认就是 static，所以直接给按钮加 bottom: 0 会掉到整个页面底部，而不是卡片内部。
- 给
.card加上position: relative（最稳妥，不影响布局流） - 别用
position: inherit或漏写父级定位，这是最常被忽略的一步 - 如果卡片用了
.card-body等内层容器作为按钮父级，那得给那个容器设relative，不是只看最外层.card
按钮用 absolute 贴底后位置偏移？注意 padding 和 box-sizing
卡片内容区（比如 .card-body）通常有 padding，而 absolute 元素是相对于父容器 content box 定位的。如果没重置 box-sizing，按钮的 bottom: 0 实际对齐的是父容器内边距边缘，视觉上会浮在空白上方。
- 推荐把按钮挂载在
.card直接子元素层级，避免嵌套过深带来的定位参考错乱 - 按钮本身加
width: 100%和box-sizing: border-box，防止宽度溢出或 padding 拉宽 - 若需留出底部间距，用
bottom: 1rem而非靠margin，后者在绝对定位下无效
响应式下按钮被截断或错位？flex 替代方案更稳
纯绝对定位在小屏幕或动态内容高度变化时容易失守——比如卡片内容变多撑高，按钮却还钉在老位置；或者媒体查询改了 padding，bottom 值没同步更新。
- 更健壮的做法：给
.card设display: flex; flex-direction: column，再让按钮用margin-top: auto - Bootstrap 5 自带
.d-flex+.flex-column+.mt-auto组合，一行搞定，无需额外 CSS - 这个方案天然兼容高度自适应、响应式 padding、甚至卡片折叠动画
按钮贴底后遮挡文字或点击区域太小？修正 z-index 和尺寸
绝对定位元素默认堆叠层级（z-index）为 auto，可能被卡片内其他元素（如图片、标题）盖住；另外，没设 height 或 line-height 的按钮在窄屏下容易被压缩成一条线。
- 按钮必须加
z-index: 1（或更高），确保压在卡片内容之上 - 显式设置
min-height或padding，比如padding: 0.5rem 1rem，避免 iOS Safari 下点击热区过小 - 如果按钮含图标，记得用
vertical-align: middle或display: inline-flex对齐文本，不然基线错位明显
.card 加 position: relative。后面所有调试，都是在补这个缺口。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
