根本原因是 .row 缺乏高度上下文导致 align-items-end 失效；必须为 .row 设置明确高度（如 vh-100 或 h-100），并在断点下用 align-items-{breakpoint}-end 控制，同时卡片内部需 d-flex flex-column + flex-grow-1 + mt-auto 实现完整底部对齐。
两个并列的 .card 在不同断点下底部不对齐，根本原因不是卡片本身“没对齐”，而是它们默认按内容高度自然撑开，而 Bootstrap 的 .row 默认不提供垂直方向的对齐上下文——必须显式启用 flex 布局 + 明确高度约束，才能让 align-items-end 类生效。
为什么直接加 align-items-end 没反应
常见错误现象：<div class="row align-items-end"> 包着两个 .card，但卡片底部依然参差不齐。
-
.row默认是display: flex，但它的高度由子项内容撑开（往往只有几十像素），没有富余空间供align-items-end分配 -
align-items-end是在交叉轴（垂直方向）上把子项“推到底部”，前提是容器有可分配的高度空间 - 如果
.row父级（比如.container）也没设高度，那整个链路都缺高度上下文
必须给 .row 设明确高度才有效
没有高度，align-items-end 就是空转。推荐用响应式高度类，避免写死像素值：
- 全屏场景：用
vh-100（视口高），<div class="row align-items-end vh-100"> - 嵌套在容器中：确保
.container或其祖先有min-height: 100vh或h-100，再给.row加h-100 - 固定内容区：用
min-h-500px（需自定义 CSS）或style="min-height: 500px"，但注意这会破坏响应式弹性 - 别只用
min-height：它不触发 Flex 对齐行为，height或vh-*类才是可靠选择
如何按断点控制底部对齐开关
移动端单列堆叠时不需要底部对齐，只在平板及以上并排显示时才需要——这时不能全局加 align-items-end，得用断点前缀：
- 仅在 ≥768px（md）启用：
<div class="row align-items-md-end h-100"> - 仅在 ≥992px（lg）启用：
<div class="row align-items-lg-end vh-100"> - 想在 md 启用、xl 恢复默认？加
align-items-xl-stretch（stretch是 flex 默认值） - 不要混用
align-items-sm-start align-items-md-end：后写的会覆盖前一个，且小屏不会自动回退到 start
卡片内部按钮/页脚也要对齐？得靠 d-flex flex-column
即使整行 .row 底部对齐了，如果每个 .card 内部的按钮位置不一致（比如有的标题长、有的短），视觉上还是错位。这时候要同步处理卡片内部：
- 给
.card加d-flex flex-column和min-height（如min-h-300px） - 给
.card-body加flex-grow-1，把剩余空间留给正文区域 - 把按钮放在
.card-footer或单独<div class="mt-auto"></div>中，mt-auto会把它推到底部 - 避免对按钮写
margin-top: auto或position: absolute，会破坏 Flex 流
真正麻烦的从来不是加哪个类，而是高度上下文是否传递到位——.row 缺高度，.card 缺 flex-column，.card-body 缺 flex-grow-1，三者漏一，底部对齐就只是看起来“好像加了”。
