align-self-*类只对Flex容器的直接子元素生效，若目标元素非.row的直系子项（如中间嵌套div），则完全无效；且父容器必须有明确高度才能体现对齐效果，否则无交叉轴空间可分配。
align-self-*类只对直接子元素生效
加了align-self-center却没反应？先确认目标元素是不是.row的**直接子元素**。如果中间隔了一层div，比如：<div class="row"><div><div class="col align-self-center">...</div></div></div>，那align-self-center完全无效——它只作用于 flex 容器的直系子项。
常见错误是把类加在嵌套内容里（比如按钮、图标），而不是加在.col本身。正确写法是：<div class="col align-self-end"><button>Submit</button></div>
父容器必须有明确高度才能看到对齐效果
align-self-*不是“移动元素”，而是让元素在**可用交叉轴空间内按规则贴边或居中**。如果.row高度仅由内容撑开（比如只有一行文字），那就没有“剩余空间”可分配，align-self-center和align-self-end看起来就跟没写一样。
- 给
.row加h-100或min-h-100（Bootstrap 5.3+） - 或用
vh-100强制占满视口高度 - 若父级是
.container，确保它也继承了高度（比如加h-100）
没高度 = 没对齐空间，这是最常被忽略的前提条件。
align-self-*和align-items-*冲突时谁赢？
align-self-*优先级永远高于align-items-*。比如：<div class="row align-items-start"><div class="col align-self-center">Only me centered</div></div>，这一列就会突破整行顶部对齐的设定，单独居中。
但要注意：如果.row设了align-items-stretch（默认行为），而某列内容高度为 0 或极短，align-self-center可能仍不明显——因为 stretch 会先拉伸该列填满整行高度，再居中其内部内容；此时实际效果取决于内容自身高度。
响应式写法要加断点前缀
想在小屏左对齐、大屏居中？不能只写align-self-center，得用断点修饰：align-self-md-center、align-self-lg-end。Bootstrap 5 支持 sm/md/lg/xl/xxl 五档。
注意：没有align-self-xs-*，最小断点从sm开始；也没有align-self-auto这类值，只有start/center/end/baseline/stretch五种。
真正卡住人的地方往往不在类名拼写，而在父容器有没有高度、目标元素是不是直系子项、以及是否误以为 align-self 能“推着元素往下走”——它只是在已有空间里重新分配位置。
