卡片底部按钮不对齐，需将.card-body设为flex column容器（d-flex flex-column或display:flex;flex-direction:column），否则margin-top:auto无效；按钮应使用mt-auto而非align-self:flex-end，且卡片需设min-height保证等高。
卡片底部按钮不对齐，是因为没让 .card-body 成为 flex column 容器
直接给 .card-body 加 d-flex flex-column（Bootstrap）或 display: flex; flex-direction: column;（原生 CSS），是让按钮沉底的前提。否则 margin-top: auto 无效——它只在 flex 子项内部生效，且依赖主轴为垂直方向。
常见错误是只给按钮加 mt-auto，但父容器仍是普通块级流；此时 margin 会被忽略，按钮继续随内容浮动。
- Bootstrap 用户：确保
.card-body同时有d-flex和flex-column，缺一不可 - 原生 CSS 用户：别漏掉
height: 100%或min-height，否则 flex 容器高度为 auto，margin-top: auto没空间可“吸” - 避免在
.card-body上同时用float、position: absolute或display: inline-block，这些会让 flex 失效
按钮用 mt-auto 还是 align-self: flex-end？优先选前者
mt-auto 是更稳定的选择，尤其当卡片内容动态加载或文字行数不确定时。align-self: flex-end 要求父容器在交叉轴（即水平方向）有明确尺寸，而 flex-direction: column 下交叉轴是水平的，所以它控制的是左右对齐，不是上下沉底。
想让按钮真正“到底部”，必须靠主轴方向上的自动外边距，而不是交叉轴对齐。
立即学习“前端免费学习笔记（深入）”；
-
mt-auto作用于按钮自身，在flex-direction: column下会把按钮推到容器底部，不管上面有多少内容 -
align-self: flex-end在column模式下只会把它右对齐，对垂直位置无影响 - 如果用了
justify-content: space-between，按钮要放在最后一个子元素位置，否则布局逻辑会错乱
卡片整体高度不一致，margin-top: auto 还管用吗？
管用，但前提是每张卡片的容器高度一致——不是靠内容撑开，而是靠 min-height 或父容器约束。否则，文字少的卡片高度小，mt-auto 只能把它推到那个小高度的底部，视觉上还是错位。
等高不是靠 JS 或固定 height，而是靠 flex 布局 + 明确的最小高度基准。
- 给
.card设min-height: 240px（或根据设计稿调整），比设死height更安全 -
.card-content（包裹标题和描述的容器）建议加flex: 1，让它占满剩余空间，避免文字区域塌缩 - 图片记得加
max-width: 100%和height: auto，否则可能撑破高度基准
Bootstrap 卡片里按钮铺不满宽度，加 w-100 就够了吗？
加 w-100 能让按钮宽度占满父容器，但要注意它是否被嵌套在额外的 div 或 form 里——这些容器若没设 width: 100% 或 display: block，w-100 会失效。
更稳妥的做法是确认按钮的直接父级就是 .card-body（或你设了 d-flex flex-column 的那个容器）。
- 按钮类组合推荐：
btn w-100 mt-auto，不加d-flex justify-content-center——它和父级 flex 冲突 - 若需右对齐，用
align-self-end，但必须确保父容器是 flex 且已设flex-direction: column - 避免给按钮设
margin-left或text-align，这些在 flex 环境下容易被覆盖或失效
最常被忽略的一点：卡片内所有文字区域（标题、描述）必须包裹在一个独立容器里，不能和按钮同级平铺。否则 flex: 1 或 mt-auto 会找不到“中间空白区”，按钮就悬在半空。
