<p>Bootstrap 的 align-items- 响应式类必须带 sm/md/lg/xl/xxl 断点前缀才生效，且需确保 .row 有足够高度（如 min-vh-100）；align-self- 仅对 .row 直接子元素有效，并优先于 align-items-*。</p>
align-items-* 响应式类必须带断点前缀才生效
Bootstrap 的 align-items-center 这类工具类本身**没有响应式行为**，直接写不会随屏幕变化；要实现“小屏顶部对齐、大屏垂直居中”，必须用带断点的变体，比如 align-items-sm-start、align-items-lg-center。
可用断点前缀为：sm、md、lg、xl、xxl；没有 xs 或 auto；值仅限 start / center / end / baseline / stretch。
-
align-items-md-center表示：在md（≥768px）及以上断点才启用居中，更小屏幕回退到父级默认（通常是stretch） - 多个断点可叠加，如
align-items-sm-start align-items-lg-center—— 小屏顶对齐，大屏居中 - 注意顺序：后写的类会覆盖前面的，所以断点更大的类建议放后面，避免被低断点类压制
- 如果某断点下想“取消”对齐（比如恢复默认拉伸），不能写
align-items-sm-auto（不存在），得用align-items-sm-stretch
.row 必须有高度，否则响应式对齐看不见效果
无论加了 align-items-lg-center 还是 align-items-xl-end，只要 .row 高度由内容撑开（比如只有一行文字），所有对齐都会“失效”——不是代码错了，是没空间可对齐。
- 全屏场景优先用
min-vh-100（兼容性好，且响应式友好） - 嵌套布局中，若
.row在.container内，需确保.container也加h-100，否则高度无法继承 - 避免用
height: 100vh，它在 iOS Safari 中可能因地址栏缩放导致计算错误；min-vh-100更稳妥 - 调试时可在 DevTools 中检查
.row的 computed height，若远小于视口高，就说明高度缺失
align-self-* 断点写法和 .col 直接子项限制
如果只要某一列在特定断点下改变自身在 .row 中的位置（比如其他列顶对齐，唯独这列大屏底对齐），该用 align-self-* 响应式类，但有两个硬约束：
- 目标元素必须是
.row的**直接子元素**；中间多一层div就失效，比如<div class="row"><div><div class="col align-self-lg-end"></div></div></div>不工作 - 响应式写法同理：
align-self-md-end、align-self-xl-center，不能混用非标准前缀（如align-self-sm不合法） -
align-self-*永远高于align-items-*，哪怕.row设了align-items-start，加了align-self-lg-center的列仍会单独居中 - 若该列内容极少（比如只有图标），即使加了
align-self-lg-end，也可能因自身高度≈0而看不出“底部”效果——此时建议给列加min-height或用d-flex align-items-end控制内部
表格或嵌套 Flex 容器里，.col 的垂直对齐会失效
把 .col 塞进 <td>、<nav> 或自定义组件里，再加 align-items-lg-center，大概率无效——因为这些父容器可能不是 Flex 上下文，或者 display 被重写为 table / grid / block。
- 先检查 DevTools 中
.row的 computeddisplay，必须是flex或inline-flex；若显示block，说明被覆盖了 - 表格内对齐应改用原生方案：
<td class="align-middle">（适用于单单元格），或在外层<tr>加align-middle（Bootstrap 5.3+ 支持） - 如果嵌套在
.card或.modal-body中，确认这些容器没设display: block !important；必要时手动补d-flex - 最稳妥的降级做法：放弃
.row级对齐，在目标.col内部用d-flex flex-column justify-content-center，把对齐逻辑下沉，不依赖外层高度
真正卡住人的地方，往往不是类名拼错，而是断点类加在了错误层级、父容器 display 被悄悄覆盖、或者以为 “有类就有空间”，却忘了 .row 自身连 min-height 都没设。
