必须为.row设置明确高度（如vh-100或h-100），否则align-items-end无效；因Flex对齐需垂直空间，.row默认由内容撑高，无富余空间则无法对齐。
Bootstrap 5 中 .row 底部对齐必须加高度，否则 align-items-end 无效
直接给 .row 加 align-items-end 类不会让列“贴底”，除非它有明确高度。flex 的 align-items 是在交叉轴（垂直方向）上分配空间，没空间就无处可对齐——.row 默认高度由内容撑开，往往只有几像素高。
常见错误现象：加了 align-items-end 后列依然顶着父容器顶部；开发者工具里看到 align-items: flex-end 计算值生效，但视觉毫无变化。
-
.row自身需显式高度：推荐用vh-100（视口高）、h-100（继承父高），或设min-height: 500px等固定值 - 若
.row在.container内，确保.container或其祖先也有高度（比如min-height: 100vh） - 避免只靠
min-height：它不触发 Flex 对齐行为，必须是height或vh类
align-items-end 如何按断点响应式生效
Bootstrap 5 提供断点前缀，如 align-items-md-end、align-items-lg-end，它们只在对应断点及以上生效。注意：这些类本身不带媒体查询逻辑，而是由 Bootstrap CSS 输出的对应规则控制。
使用场景：PC 端希望三列底部对齐，移动端因单列堆叠，不需要对齐——此时不该用 align-items-end 全局加，而应限定断点。
- 写法示例：
<div class="row align-items-lg-end">→ 仅在lg（≥992px）及以上宽度生效 - 断点顺序：sm / md / lg / xl / xxl，对应最小宽度，不是“仅在此尺寸”
- 不能混用多个断点类覆盖同一属性（如
align-items-sm-start align-items-md-end），后写的会覆盖前一个，且无回退逻辑 - 若需“md 底部对齐，xl 恢复默认”，得手动加
align-items-xl-stretch（stretch 是默认值）
为什么 align-self-end 加在 .col 上不管用
align-self-end 是作用于单个 .col 的，但它只在父容器是 Flex 容器且有足够高度时才可见效果。多数失效不是类写错，而是上下文被破坏。
常见失效原因：
-
.row被包裹在自定义组件中，该组件设了display: grid或display: block，直接废掉 Flex 上下文 - 目标
.col不是.row的直接子元素（中间插了<div>），导致align-self失去作用对象 - 检查开发者工具中
.row的display是否仍是flex；若显示为block，说明被其他 CSS 覆盖 -
.col内容高度远小于.row高度，但.row本身又没设高，结果就是“底部”等于“顶部”
替代方案：不用 align-items 也能让按钮贴底
如果只是想把某个按钮、图标之类的内容推到列底部，而非整行列对齐，mt-auto 更轻量、更可靠，且不依赖 .row 高度。
前提条件：该列或其直接父容器必须是 Flex 容器（即含 d-flex）。
- 给
.col加d-flex flex-column，再给按钮加mt-auto：按钮自动占据剩余空间，被“顶”到底部 - 若列内已有
.card，直接给.card-body加d-flex flex-column和按钮加mt-auto -
mt-auto在非 Flex 容器中无效，切勿单独加在普通<div>上 - 相比
align-items-end，mt-auto兼容性更好，且不会影响其他子元素的布局流
真正容易被忽略的点：所有对齐类都依赖父容器的 Flex 上下文和明确高度——这两者缺一不可。调试时先看 .row 的 display 和 height，比反复试 align-self 有效得多。
