CSS/Bootstrap 5 - 导航链接到侧边栏底部？

Question

我一直在尝试在我创建的侧边栏底部获取这三个导航链接。我无法设法让他们到达那里。我不太确定还能尝试什么。

我尝试从侧边栏底部开始的导航链接背景为绿色。

抱歉，如果这是一个不好的描述，我对一般编码很陌生。预先感谢。

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 p2"
              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>

              <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>

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;
}

/* #main {

} */

我尝试制作粘性侧边栏显示：flex，然后使.bottom导航链接align-self：flex-end；以及尝试 flex-direction: column-reverse;

我预计带有绿色背景的链接的 div 会从侧边栏 div 的底部开始，因为它被声明为弹性列。我不确定我是否将引导注释与常规 CSS 注释混淆了，但这似乎是一个简单的修复，但令人沮丧的是不知道如何修复它。

Answer 1

只需添加

margin-bottom: auto

主页链接，即 bootstrap 中的

mb-auto

。

<a href="./index.html" class="nav-link mb-auto">

#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!important;*/
}

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<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 p2" id="pink-sidebar">
        <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"
                  />
                </svg>
              </a>

        <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>