本文详解 Bootstrap 5 中实现子 div 垂直底对齐（bottom-aligned）的正确方法，重点纠正常见误区（如误用 align-bottom 或孤立使用 align-self-end），并提供基于 Flexbox 的标准解决方案。
本文详解 bootstrap 5 中实现子 `div` 垂直底对齐（bottom-aligned）的正确方法，重点纠正常见误区（如误用 `align-bottom` 或孤立使用 `align-self-end`），并提供基于 flexbox 的标准解决方案。
在 Bootstrap 5 中，仅靠 align-self-end 或 align-bottom 类无法实现子元素相对于父容器的垂直底部对齐——这是因为这些类的作用依赖于父容器的布局上下文。align-bottom 并非 Bootstrap 5 官方 CSS 类（属于过时或无效类名），而 align-self-end 仅在父元素为 Flex 容器且设置了 flex-direction: column 或存在明确交叉轴（cross-axis）定义时才生效。
✅ 正确做法是：将父容器设为 Flex 容器，并控制其主轴与交叉轴对齐方式。针对“子元素贴父容器底部”的需求，推荐以下组合：
- 父容器添加 d-flex + align-items-end（适用于父容器高度已知/有内容撑开，且子元素为单个块级元素）；
- 或更通用可靠的方案：d-flex + flex-column + justify-content-end（强制父容器为垂直主轴，子元素沿主轴末端排列）；
- 若需保持水平布局但仅调整垂直位置，可采用 d-flex + align-items-baseline（如原答案所用），但需注意其语义为“基线对齐”，在纯块级结构中效果接近底部对齐，实际生产环境更推荐 align-items-end。
以下是修正后的标准实现（精简关键代码）：
<!-- 父容器：启用 Flex 布局，交叉轴对齐至末端 -->
<div class="col-md-4 d-flex align-items-end" id="right-div">
<!-- 子容器：无需额外 align-self-*，由父容器统一控制 -->
<div class="right-block" 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>⚠️ 注意事项：
- 高度依赖性：若父容器（#right-div）无显式高度（如未设置 min-height 或无足够内容撑开），Flex 对齐可能不可见。此时建议添加 min-height: 100% 或配合 h-100 类确保容器具备可对齐的空间。
- 避免冗余样式：原答案中为 #div-in-right-div 添加 width: 100% 是因 .nav 默认 display: flex 导致内部 li 水平排列，但该宽度声明并非对齐必需；若需子元素占满父宽，应优先使用 Bootstrap 工具类如 w-100。
- 响应式兼容：上述 Flex 类（d-flex, align-items-end）在所有断点均有效，但需确认父容器网格层级（如 col-md-4）在目标设备上正确渲染。
? 总结：Bootstrap 5 的垂直对齐本质是 CSS Flexbox 的封装。牢记「对齐生效的前提是父容器为 Flex 容器」，摒弃对非标准类（如 align-bottom）的依赖，善用 d-flex + align-items-* / justify-content-* 组合，即可精准、可靠地实现各类垂直定位需求。
