2023年5月25日 00:10:54go评论68阅读模式

英文:

Align navbar links with image - bootstrap 5

问题

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

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

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

当前的外观如下所示：

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

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

This is an idea of how it should look aligned:

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

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

答案1

得分: 0

以下是您要翻译的内容：

将 .container-fluid 的 width 设置为 auto;。
将 #mynavbarinside 的 width 设置为 100%;。
将 .navbar-brand 的 margin-right 设置为 0 !important;。
将 #site_nav 的 width、display 设置为 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-100、d-flex 和 justify-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="width: 20%" 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.

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

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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

Open button not hiding when side bar pops out

你如何找到 Bootstrap 5 调试版本的子资源完整性（SRI）代码？

使用CSS重新创建形状

Compare two variables inside Go template

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论