将导航栏链接与图像对齐- bootstrap 5

kxxlusnw 于 2023-05-27 发布在 Bootstrap

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

我正在使用基本的导航栏：（第一个例子在他们的网站）我也使用灵活的方向设置为“列”，以显示图像以上的菜单项。
https://getbootstrap.com/docs/5.0/components/navbar/
我有一个标志，我想与链接的权利下面的地方。然而，我想链接，以配合每一方的形象。
我的问题是，什么是正确的引导代码，使菜单项拉伸到与图像相同的宽度？我在下面提供了一个完整的样本。要重新创建问题，请“运行代码段”并选择“整页”。谢谢你！
这是它目前的样子：

这是它应该如何对齐的想法：

#mynavbar {
  border: 2px solid black;
}

#mynavbarinside {
  border: 2px solid black;
}

<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
   </head>
   <body>
      <nav id="mynavbar" class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid" style="flex-direction: column;">
            <div class="navbar-brand pb-0">
               <img src="https://shapedplugin.com/wp-content/uploads/2023/04/Create-a-full-width-ticker-logo-carousel.png" class="img-fluid">
            </div>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div id="mynavbarinside" class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul id="site_nav" class="navbar-nav mx-auto">
                  <li class="nav-item" style="width: 20%">
                     <a class="nav-link" href="http://link01" target="_blank">
                     Link<br>
                     One
                     </a>
                  </li>
                  <li class="nav-item" style="width: 20%">
                     <a class="nav-link" href="http://link02" target="_blank">
                     Link<br>
                     Two
                     </a>
                  </li>
                  <li class="nav-item" style="width: 20%">
                     <a class="nav-link" href="http://link03" target="_blank">
                     Link<br>
                     Three
                     </a>
                  </li>
                  <li class="nav-item" style="width: 20%">
                     <a class="nav-link" href="http://link04" target="_blank">
                     Link<br>
                     Four
                     </a>
                  </li>
                  <li class="nav-item" style="width: 20%">
                     <a class="nav-link" href="http://link05" target="_blank">
                     Link<br>
                     Five
                     </a>
                  </li>
               </ul>
            </div>
         </div>
      </nav>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
   </body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/76325517/align-navbar-links-with-image-bootstrap-5

1条答案

按热度按时间

avwztpqn1#

您必须执行以下操作：

将width: auto;设置为.container-fluid。
将width: 100%;设置为#mynavbarinside。
将margin-right: 0 !important;设置为.navbar-brand。
将width: 100%;、display: flex;和justify-content: space-between;设置为#site_nav。此外，从每个.nav-item中删除style="width: 20%"。

您可以通过添加以下Bootstrap HTML类来实现这一切：

w-auto到.container-fluid。
w-100到#mynavbarinside。
me-0到.navbar-brand。
w-100、d-flex和justify-content-between到#site_nav。

请参见下面的片段。

#mynavbar {
  border: 2px solid black;
}

#mynavbarinside {
  border: 2px solid black;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <nav id="mynavbar" class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid w-auto" style="flex-direction: column;">
      <div class="navbar-brand pb-0 me-0">
        <img src="https://shapedplugin.com/wp-content/uploads/2023/04/Create-a-full-width-ticker-logo-carousel.png" class="img-fluid">
      </div>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
      <div id="mynavbarinside" class="collapse navbar-collapse w-100" id="navbarSupportedContent">
        <ul id="site_nav" class="navbar-nav mx-auto w-100 d-flex justify-content-between">
          <li class="nav-item">
            <a class="nav-link" href="http://link01" target="_blank">
                     Link<br>
                     One
                     </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://link02" target="_blank">
                     Link<br>
                     Two
                     </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://link03" target="_blank">
                     Link<br>
                     Three
                     </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://link04" target="_blank">
                     Link<br>
                     Four
                     </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://link05" target="_blank">
                     Link<br>
                     Five
                     </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</body>

</html>

赞(0）回复(0）举报 2023-05-27

我来回答

将导航栏链接与图像对齐- bootstrap 5

1条答案

相关问题

热门标签

最新问答