英文:
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:
<!-- 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 -->
<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>
<!-- end snippet -->
答案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;
andjustify-content: space-between;
to the#site_nav
. Also, removestyle="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
andjustify-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 -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论