<p>align-items-* 必须加在 .row 上而非 .col 上，因其作用于 Flex 容器的直接子项；.row 是 Flex 容器，.col 是其子项，对齐需在 .row 设置，断点类需用 sm/md/lg/xl/xxl 前缀，且后写覆盖前写，同时父容器必须有明确高度（如 min-vh-100 或 h-100）才能生效。</p>
align-items-* 必须加在 .row 上，不是 .col 上
很多人把 align-items-center 加在 .col 上，发现列没变化——因为 align-items 是作用于 Flex 容器的子项，而真正包裹 .col 的 Flex 容器是 .row。加在 .col 上只会影响它内部的文字、图片等子元素，不是列与列之间的对齐。
正确写法是直接给 .row 加类：<div class="row align-items-lg-center">...</div>
-
align-items-start：所有列顶部对齐（默认行为） -
align-items-center：所有列内容在行高范围内垂直居中 -
align-items-end：所有列内容底部对齐 -
align-items-baseline：按文本基线对齐，适合图标+短句混排
断点类名必须用 sm/md/lg/xl/xxl 前缀，不能混用
Bootstrap 5 的响应式对齐类只支持五档断点：sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px）。没有 xs 或 auto 变体。
写法示例：<div class="row align-items-md-center align-items-xl-end">
注意：后写的类会覆盖前一个，align-items-xl-end 生效，align-items-md-center 在 xl 及以上被忽略。
- 想“md 居中，xl 恢复默认”？得显式加
align-items-xl-stretch（stretch是 Flex 默认值） - 不能写
align-items-sm-center align-items-md-end期望叠加生效——CSS 层叠规则下只保留最后一个 - 断点类只在对应宽度及以上生效，不是“仅在此尺寸”
没高度，align-items 就是摆设
align-items 不会撑开父容器，它只在已有垂直空间里重新分配位置。如果 .row 高度由内容撑开（比如几行文字），那所谓“居中”可能只有几像素偏移，肉眼根本看不出。
必须确保 .row 或其某个祖先有明确高度：
- 全屏场景优先用
min-vh-100（兼容性好，响应式友好） - 嵌套布局用
h-100，但要保证所有父级都加了h-100（.container→.row→ …） - 避免写死
height: 500px，换设备就错位 -
min-height不足以触发对齐行为，必须是height或vh类
典型有效结构：<div class="container min-vh-100"><div class="row align-items-lg-center h-100"><div class="col">内容</div></div></div>
单列特殊对齐别动整行，用 align-self-*
如果只要某一列底部对齐，其他列保持默认位置，就不要改 .row 的 align-items——它会影响全部子列。
此时给目标 .col 加 align-self-end 即可：<div class="row align-items-start"><div class="col">默认顶部对齐</div><div class="col align-self-end">仅此列底部对齐</div></div>
-
align-self-start/align-self-center/align-self-end都可用 - 前提是
.row确实是 Flex 容器（Bootstrap 5 默认就是），且没被其他样式覆盖成display: block或grid - 若该列内容高度为 0 或极小，仍可能不生效；可配合
d-flex align-items-end或mt-auto更可靠
真正容易被忽略的是：对齐效果是否依赖父容器高度，以及断点类是否被后续同属性类覆盖——这两点出错时，开发者工具里明明看到类名存在、align-items 计算值也生效，但视觉毫无变化。
