在 Bootstrap 5 中，仅靠 align-self-end 或过时/无效的 align-bottom 类无法使子元素相对于父容器垂直底对齐；需结合 Flex 布局工具类（如 d-flex + align-items-baseline 或更推荐的 align-items-end）并确保父容器具备明确的高度上下文或 flex 容器行为。
在 bootstrap 5 中，仅靠 `align-self-end` 或过时/无效的 `align-bottom` 类无法使子元素相对于父容器垂直底对齐；需结合 flex 布局工具类（如 `d-flex` + `align-items-baseline` 或更推荐的 `align-items-end`）并确保父容器具备明确的高度上下文或 flex 容器行为。
在 Bootstrap 5 中，*`align-self-类仅在 flex 容器内生效**，且其作用对象是**直接子元素**——但前提是父容器本身必须是一个启用 Flex 布局的容器（即拥有display: flex或display: inline-flex）。原代码中，#right-div仅添加了语义不明的align-bottom（Bootstrap 5 已移除此类），且未启用 Flex，因此align-self-end在.right-block` 上完全无效。
✅ 正确解法是：
- 将父容器 #right-div 设为 Flex 容器 → 添加 d-flex；
-
控制主轴对齐方式 → 使用 align-items-end（推荐）或 align-items-baseline；
- align-items-end：所有子项沿交叉轴（此处为垂直方向）对齐到容器底部；
- align-items-baseline：按文本基线对齐，不保证严格底部贴边（尤其当内容高度不一致时），故实际项目中应优先选用 align-items-end；
- 可选：为子元素设置宽度约束（如 w-100 或 width: 100%），避免因 Flex 默认 flex-shrink: 1 导致宽度压缩，影响布局预期。
以下是优化后的关键代码片段（精简版，聚焦核心逻辑）：
<!-- 父容器：启用 Flex 并设置垂直底部对齐 -->
<div class="col-md-4 d-flex align-items-end" id="right-div">
<!-- 子容器：无需 align-self-end（父级已统一控制） -->
<div class="right-block w-100" id="div-in-right-div">
<ul class="nav justify-content-end">
<li><a href="#"><i class="bi bi-house"></i> <span>Add</span></a></li>
<li><a href="#"><i class="bi bi-person"></i> <span>Login</span></a></li>
</ul>
</div>
</div>⚠️ 注意事项：
- 不要滥用 align-self-end：当父容器已用 align-items-end 统一对齐时，子元素无需额外设置 align-self-end（除非需个别覆盖）；
- 高度依赖性：若 #right-div 高度由内容撑开（无固定高），align-items-end 仍能生效；但若父容器高度塌陷（如子元素浮动、绝对定位），需先通过 min-height、h-100 或 d-flex flex-column 等保障容器有可参考的“底部”；
- 响应式兼容：上述类（d-flex, align-items-end, w-100）均支持响应式前缀（如 d-md-flex, align-items-md-end），可在断点间精准控制；
- 替代方案（绝对定位）：若 Flex 不适用（如需脱离文档流），可用 position-relative + position-absolute bottom-0，但会丧失 Flex 的自适应优势，慎用。
? 总结：Bootstrap 5 的垂直对齐本质是 CSS Flexbox 的封装。牢记「对齐生效的前提是父容器为 Flex 容器」，善用 d-flex + align-items-* 组合，即可稳健实现子元素相对于父容器的顶部、中部、底部对齐。
