卡片容器必须设 display: flex 且 flex-direction: column，否则 margin-top: auto 等垂直对齐失效；按钮需位于 flex-column 容器的直接子元素或其父容器上，同时卡片需设 min-height 并配合外层 align-items: stretch 或 grid-template-rows: 1fr 实现等高。

卡片容器必须设 display: flex 且 flex-direction: column

按钮“浮”在中间、随内容变高变低，90% 是因为卡片没启用垂直弹性布局。Flex 默认是 row，此时 margin-top: auto 或 align-self: flex-end 全部失效。

必须显式写：.card { display: flex; flex-direction: column; }。如果用了 .card-body 这类 wrapper，那 flex-direction: column 得加在它身上，而不是外层 .card。

用浏览器开发者工具检查 computed styles，确认 flex-direction 确实是 column —— 别被更高优先级的 CSS 覆盖掉。

按钮不是直接子元素？那就把 margin-top: auto 加到它的父容器上

常见结构是：

标题

正文

操作

。这时 不是 .card 的直接子项，margin-top: auto 加在 button 上完全没用。

• 给 .card-actions 加 margin-top: auto（前提是它是 .card-content 的直接子元素）
• 或者让 .card-content 自身变成 flex-column 容器，并用 justify-content: space-between，再把

  +

  

  Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

  实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

  下载
  包进一个
  ，按钮单独作为最后一个子元素
• 避免三层以上嵌套：每多一层 wrapper，就多一重对齐断裂风险

网格中卡片高度不一致？min-height 和 align-items: stretch 缺一不可

单张卡片按钮到底了，但网格里还是高低错位——问题不在按钮，而在卡片本身高度不同。外层容器（比如 .row 或 display: grid）没强制等高。

• .card 必须设 min-height（别只靠 height，会截断内容）
• 外层如果是 Flex 布局，加 align-items: stretch；如果是 Grid，加 grid-template-rows: 1fr
• 若用 Bootstrap，.row 默认不是 stretch，得额外加 align-items-stretch 类
• 检查有没有 overflow: hidden 或 max-height 暗中限制了卡片高度

按钮尺寸不统一？别硬设 width/height，用 padding + box-sizing: border-box

响应式下固定宽高容易溢出或错位，尤其小屏。更稳的方式是控制内边距和字体：

• 统一 padding: 12px 24px，比 height: 40px 更兼容不同行高
• 加 font-size: 1rem 和 line-height: 1.2，防按钮因文本换行撑高
• 务必写 box-sizing: border-box，否则 border 和 padding 会让按钮总尺寸失控
• 避免 white-space: nowrap，除非能 100% 确保按钮文字不超长

真正卡住对齐效果的，往往不是按钮本身，而是卡片容器的高度分配逻辑和嵌套层级。调试时先盯死 flex-direction 和 min-height，再看按钮是否在正确层级上触发 margin-top: auto。其他样式都是锦上添花，这两点错了，后面全白搭。