如何将侧边栏内的三个导航链接固定至侧边栏底部？

问题分析 #

你当前的侧边栏容器已使用Bootstrap的flex-column和vh-100类，但未利用flex布局的空间分配特性实现底部链接靠底。之前尝试的align-self:flex-end在flex-column方向下控制的是水平对齐（左右位置），而非垂直方向的上下对齐；flex-direction:column-reverse仅反转元素顺序，都无法达到预期效果。

可行解决方案 #

给底部链接的容器添加margin-top: auto（或Bootstrap内置的mt-auto类），让它自动占据容器顶部到自身的剩余空间，从而固定在侧边栏底部。具体修改如下：

修改后的HTML代码

<div class="container-fluid">
        <div class="row">
          <div class="col-1 bg-dark position-fixed" id="sticky-sidebar">
            <div
              class="nav flex-column flex-nowrap vh-100 overflow-auto text-white p-2"
              id="pink-sidebar"
            >
              <a href="./index.html" class="nav-link"
                ><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"
                  />
                </svg>
              </a>

              <!-- 将底部链接包裹在容器中，并添加mt-auto类 -->
              <div class="mt-auto">
                <a href="#" class="nav-link bottom">Gallery</a>
                <a href="#" class="nav-link bottom">About</a>
                <a href="#" class="nav-link bottom">Contact</a>
              </div>
            </div>
          </div>
</div>

调整后的CSS（保留原有样式即可）

#sticky-sidebar {
  padding-left: 0;
  padding-right: 0;
}

#pink-sidebar {
  background-color: #eac7c7;
  align-items: center;
  padding: 1rem;
  display: flex;
}

.nav-link {
  padding: 0.5rem;
  color: #a0c3d2;
  --bs-nav-link-hover-color: #EAE0DA;
}

.bottom {
    background-color: green;
}

原理说明 #

在flex布局的column方向下，margin-top: auto会让目标元素自动“推”到容器底部——flex容器会将顶部元素与底部元素之间的所有剩余空间分配给这个margin，从而实现底部对齐效果。

内容的提问来源于stack exchange，提问作者yuyibruh