根本原因是父容器无明确高度，align-items需富余垂直空间才能对齐；必须为.row或其祖先设置vh-100/h-100等显式高度，min-height无效，且避免子项设height/min-height覆盖stretch。
align-items在.row上加了但没反应，根本原因是父容器没高度
它不是失效，是没空间可对齐。Flex 的 align-items 只在交叉轴（垂直方向）上有富余空间时才起作用；如果 .row 高度由内容撑开（比如只有两行文字，computed height ≈ 48px），那无论设 align-items-end 还是 align-items-center，子列都只能贴顶——因为根本没“底部”或“中间”可对齐。
必须确保 .row 或其至少一个直接祖先有明确高度：
-
vh-100最常用：全屏场景下直接加在.row上 -
h-100配合祖先的min-vh-100或h-100使用，适合嵌套容器 - 避免只用
min-height：它不触发 Flex 对齐逻辑，align-items仍为空转 - 别写死
height: 400px：破坏响应式，且在小屏可能溢出
为什么加了d-flex还是不等高，或者背景色拉不满
等高和背景撑满都依赖 align-items: stretch（Flex 默认值），但它极易被覆盖或抑制：
- 显式写了
align-items-center、align-items-start等，就关掉了 stretch 行为 - 子列（
.col）自己设了height、min-height或flex-shrink: 0，相当于手动锁死高度 - 列内有
position: absolute元素：它脱离文档流，导致该列高度计算塌陷 - 图片没加
max-width: 100%或height: auto：浏览器按 intrinsic size 撑高，但 stretch 不感知 - 父容器没高度来源（如
min-height: 100vh），整个 Flex 链路高度为 0
align-items-{breakpoint} 在移动端不生效，其实是断点没配对
Bootstrap 5 的 align-items-* 类默认只在 xs（无前缀）生效；写成 align-items-center 就等于 align-items-xs-center，在 sm 及以上断点不会自动继承。
常见错误写法：align-items-center align-items-md-end —— 后者会覆盖前者，且小屏不会回退到 center。
正确做法：
- 仅在 ≥768px 生效：用
align-items-md-center - 手机居中、平板左对齐：用
align-items-center align-items-md-start - 想在
xl恢复默认拉伸行为：加align-items-xl-stretch（stretch 是 flex 默认值）
卡片内部按钮贴底，别只靠.align-items-end
整行 .row 底部对齐后，如果每个 .card 内容高度不同，按钮视觉上依然错位。这时得处理卡片内部：
- 给
.card加d-flex flex-column和min-h-300px（或响应式高度类） - 给
.card-body加flex-grow-1，把剩余空间留给正文 - 按钮放
.card-footer，或单独加mt-auto：比改 display 更轻量，且不干扰原有流式布局 - 别只在
.col上加align-items-end：那是控制列内子元素，不是列之间对齐
真正卡住的地方，往往不是“怎么加类”，而是忘了检查 .row 的 computed height 是多少，以及有没有某条 CSS 规则悄悄把 align-items: stretch 覆盖掉了。
