本文详解如何利用 Bootstrap 的 mb-auto 工具类，结合 Flex 布局原理，将一组导航链接精准推至固定高度侧边栏的底部，无需 JavaScript 或复杂嵌套。
本文详解如何利用 bootstrap 的 `mb-auto` 工具类，结合 flex 布局原理，将一组导航链接精准推至固定高度侧边栏的底部，无需 javascript 或复杂嵌套。
在构建响应式管理后台或单页应用时，常需一个垂直、固定高度（如 vh-100）的侧边栏，并将核心导航项（如首页）置于顶部，而次要功能链接（如“Gallery”“About”“Contact”）锚定在底部——这种“顶部+底部”双区布局能显著提升信息层级与用户体验。
实现的关键在于理解 Flex 容器的主轴分布逻辑：当侧边栏使用 flex-column（即主轴为垂直方向）时，所有子元素默认从顶部开始依次排列。要让底部链接“沉到底部”，最简洁可靠的方式不是给底部元素设 margin-top: auto（易受顺序影响），而是给顶部第一个元素（如首页图标链接）添加 margin-bottom: auto ——这会使其自动吸收剩余空白空间，从而将后续兄弟元素“挤”至容器末端。
Bootstrap 提供了开箱即用的工具类 mb-auto，恰好对应 margin-bottom: auto。只需将其添加到首页 标签即可：
<a href="./index.html" class="nav-link mb-auto"> <svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#A0C3D2" class="bi bi-house" viewbox="0 0 16 16"><path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"></path></svg></a>
同时，需确保父容器正确启用 Flex 布局。Bootstrap 的 .nav.flex-column 已内置 display: flex; flex-direction: column，因此无需额外声明 display: flex（原 CSS 中冗余的 #pink-sidebar { display: flex; } 应移除，避免样式冲突）：
#pink-sidebar {
background-color: #eac7c7;
align-items: center; /* 水平居中图标与文字 */
padding: 1rem;
/* display: flex; ← 删除此行，Bootstrap .nav 已处理 */
}
.nav-link {
padding: 0.5rem;
color: #a0c3d2;
--bs-nav-link-hover-color: #EAE0DA;
}
⚠️ 注意事项：
- mb-auto 必须作用于顶部链接（首个 .nav-link），而非底部链接本身——这是 Flex 分配剩余空间的核心逻辑；
- 确保侧边栏容器具有明确高度（如 vh-100），否则 auto 无法计算有效空白；
- 避免对 .bottom 类滥用 !important（如原 CSS 中注释掉的 background-color: green!important），优先通过语义化类名和标准优先级控制样式；
- 若后续需增加顶部导航组（如多个图标），可将它们包裹在 ...中统一推顶。
该方案轻量、语义清晰、兼容性强，是 Bootstrap 5+ 中实现侧边栏“顶部-底部”分区的标准实践。
