调整导航栏链接与图像的对齐 – Bootstrap 5

huangapple go评论65阅读模式
英文:

Align navbar links with image - bootstrap 5

问题

我正在使用基本的导航栏:(在它们的网站上的第一个示例)我还将flex-direction设置为"column"以显示图像在菜单项之上。

我有一个标志,我想放在链接的正下方。然而,我希望链接与图像一侧对齐。

我的问题是,要使菜单项的宽度与图像完全相同,正确的Bootstrap代码是什么?我在下面包含了一个完整的示例。要重新创建此问题,请"运行代码片段"并选择"全屏"。谢谢!

当前的外观如下所示:

调整导航栏链接与图像的对齐 – Bootstrap 5

这是如何对齐的一个想法:

调整导航栏链接与图像的对齐 – Bootstrap 5

<!DOCTYPE html>
<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>
英文:

I am using the basic navbar: (First example on their site) I am also using flex-direction set to "column" to show image above menu items.

https://getbootstrap.com/docs/5.0/components/navbar/

I have a logo that I want to place with links right below. However, I would like the links to align on each side with the image.

My question is, what would be the correct bootstrap code to make the menu items stretch to be the same exact width as the image? I have included an entire sample below. To recreate the issue, "run code snippet" and select "full page". Thank You!

This is how it currently looks:

调整导航栏链接与图像的对齐 – Bootstrap 5

This is an idea of how it should look aligned:

调整导航栏链接与图像的对齐 – Bootstrap 5

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#mynavbar {
border: 2px solid black;
}
#mynavbarinside {
border: 2px solid black;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

答案1

得分: 0

以下是您要翻译的内容:

  • .container-fluidwidth 设置为 auto;
  • #mynavbarinsidewidth 设置为 100%;
  • .navbar-brandmargin-right 设置为 0 !important;
  • #site_navwidthdisplay 设置为 flex;justify-content 设置为 space-between;。同时,从每个 .nav-item 中移除 style="width: 20%"

您可以通过添加以下 Bootstrap HTML 类来实现所有这些:

  • .container-fluid 添加 w-auto 类。
  • #mynavbarinside 添加 w-100 类。
  • .navbar-brand 添加 me-0 类。
  • #site_nav 添加 w-100d-flexjustify-content-between 类。

请参考下面的代码片段。

英文:

You have to do the following:

  • Set width: auto; to the .container-fluid.
  • Set width: 100%; to the #mynavbarinside.
  • Set margin-right: 0 !important; to the .navbar-brand.
  • Set width: 100%;, display: flex; and justify-content: space-between; to the #site_nav. Also, remove style=&quot;width: 20%&quot; from every .nav-item.

You can achieve all this by adding the following Bootstrap HTML classes:

  • w-auto to the .container-fluid.
  • w-100 to the #mynavbarinside.
  • me-0 to the .navbar-brand.
  • w-100, d-flex and justify-content-between to the #site_nav.

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#mynavbar {
border: 2px solid black;
}
#mynavbarinside {
border: 2px solid black;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 00:10:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76325517.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定