Bootstrap 导航链接到边栏底部？

4xy9mtcn 于 11个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(108)

我一直试图在我创建的这个侧边栏的底部弄到这三个导航链接。我不能设法把它们弄到那里。我真的不知道还能尝试什么。
我有背景绿色的导航链接，我试图开始在底部的侧边栏。
对不起，如果这是一个糟糕的描述，我是新的编码一般。
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 {

} */

型
My code being ran
我试过让粘性侧边栏显示：flex，然后让底部导航链接显示：flex-end;以及尝试flex-direction：column-reverse;
我希望带有绿色背景的链接从侧边栏div的底部开始开始，因为它被声明为flex-column。我不确定我是否混淆了bootstrap注解和常规CSS注解，但这似乎是一个简单的修复方法，不知道如何修复它令人沮丧。

twitter-bootstrap

来源：https://stackoverflow.com/questions/77608262/nav-links-to-the-bottom-of-sidebar

1条答案

按热度按时间

brc7rcf01#

只需在home链接上添加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; Removed because Bootstrap .nav already adds 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>

赞(0）回复(0）举报 11个月前

我来回答

Bootstrap 导航链接到边栏底部？

1条答案

相关问题

热门标签

最新问答