align-self- 仅作用于单个 .col，需父容器 .row 有明确高度且为 flex 布局；常见失效原因是 .row 高度不足或嵌套过深；其优先级高于 .row 的 align-items-。
align-self 在 Bootstrap 5 中不是用来对齐整行（.row）的，而是专为单个列（.col）设置其在交叉轴上的对齐方式——也就是说，它只影响那个加了类的列本身，不影响其他列。
为什么 align-self-* 没生效？
最常见原因是父容器没开启 Flex 布局或没撑开高度：
-
.row默认是display: flex，但若它没高度（比如内容很短、父级没设高），align-self就无空间可“对齐” - 检查父级是否用了
vh-100、h-100或明确设置了height - 确认目标列确实直接在
.row下（不能嵌套在其他div里再加align-self）
align-self-start / align-self-center / align-self-end 的实际效果
这些类作用于单个 .col，让该列内容在垂直方向（默认主轴为水平时，交叉轴即 Y 轴）按指定方式贴齐：
-
align-self-start：列内容顶部贴齐.row的顶部边界 -
align-self-center：列内容在.row高度内垂直居中（需.row有足够高度） -
align-self-end：列内容底部贴齐.row的底部边界 - 注意：
align-self-baseline是按文本基线对齐，混排图标和文字时更自然；align-self-stretch是默认行为（列高度拉满）
和 align-items-* 的区别与配合场景
align-items-* 加在 .row 上，统一控制所有子列；align-self-* 加在某个 .col 上，覆盖默认行为：
- 想让第 2 列内容垂直居中、其余列顶部对齐？给那个
.col加align-self-center，.row不用加align-items - 想让所有列都居中，但其中一列要底部对齐？
.row加align-items-center，那列额外加align-self-end - 二者同时存在时，
align-self优先级更高，会覆盖align-items对该列的设置
真正容易被忽略的是：哪怕只用 align-self，也必须确保 .row 所在的上下文有明确高度——否则它永远只表现得像没写一样。
