align-items在Bootstrap中常无效是因为父容器无显式高度，导致无垂直空间可对齐；需确保.row或其祖先有vh-100/h-100等明确高度，且align-items应加在.row上控制列整体对齐。
align-items 在 Bootstrap 里为什么经常没反应？
因为 align-items 是 flexbox 的交叉轴对齐工具，它不“推”内容，只在**已有垂直空间内重新分配位置**。如果父容器（比如 .row）高度由内容撑开，那根本没空间可“对齐”，所有列自然堆在顶部——这不是 bug，是 flex 行为本身。
- 常见错误现象：加了
align-items-end，但文字/图片还是贴顶；检查 computed height 会发现.row高度 ≈ 内容总高 - 必须确保
.row及其至少一个祖先有明确高度（不能靠内容撑） - 推荐优先用
vh-100（视口高）或h-100（父容器 100% 高），避免写死height: 400px这类固定值 - 注意：
min-height不够，align-items不会在“最小高度之外”的空白处生效
想让整行的列底部对齐，该加在哪？
直接加在 .row 上，用 align-items-end。这是最常用也最省事的方式，适用于所有子列整体下移场景（比如三栏卡片底部统一平齐）。
- 使用场景：产品列表页每行三个卡片，希望“查看详情”按钮都对齐到同一水平线
- 正确写法：
<div class="row align-items-end vh-100"> <div class="col">内容1</div> <div class="col">内容2</div> <div class="col">内容3</div> </div>
- 别加在
.col上——那是控制列自身内部子元素的对齐，不是列之间的对齐 - 如果只有一列需要底部对齐，其他列默认位置，就别用
align-items-*，改用align-self-end加在那个.col上
单个列里内容要贴底，不是整行对齐
这时候得让列自己变成 Flex 容器，再对齐它的子元素。加 d-flex + align-items-end 到目标 .col 即可。
- 使用场景：右侧侧边栏广告位，图片+标题+按钮，希望按钮永远停在列底部，不管上面内容多少
- 示例：
<div class="col d-flex align-items-end"> <div><img src="ad.jpg"></div> <div class="mt-auto"><button>立即购买</button></div> </div>
-
mt-auto是个更轻量的替代方案：给按钮加这个类，它会自动占满上方剩余空间，把按钮“挤”到底部，无需改列的 display - 注意：
d-flex会让列内子项变成水平排列（主轴默认 row），如果原本是块级堆叠，记得加flex-column
align-items-center 居中失效？先看有没有“空间”
align-items-center 要居中，前提是容器在交叉轴上有富余空间。很多页面只写了 align-items-center，却忘了给 .row 或外层 .container 设高度，结果只是“在 24px 高里居中”——看起来和贴顶没区别。
- 典型陷阱：在 Modal 或 Card body 里用
align-items-center，但父容器没设min-height或height，导致居中不可见 - 调试建议：临时加
bg-dark和text-white到.row，再加vh-50看是否突然居中了——如果是，说明就是缺高度 - 兼容性提醒：Bootstrap 5+ 全面基于 Flexbox，
align-items类在 IE10+ 均有效，但 IE11 对vh单位支持不稳定，如需兼容，可用 JS fallback 或固定高度代替vh-100
实际项目里最容易被忽略的，是「高度继承链」——h-100 不会穿透没有显式高度设置的父级。哪怕你给 .row 加了 h-100，如果它的父 .container 没设 h-100 或 vh-100，它依然拿不到高度。一层层查上去，比反复调 align-items 更管用。
