英文:
Need help in centering links below navbar-brand using Bootstrap 5
问题
我正在练习如何使用Bootstrap 5创建一个导航栏，但无法让链接居中并位于navbar-brand下方。
这是我的当前导航栏的截图。
我的代码：
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg flex-column align-items-stretch" style="background-color: #FAF8F1; border: 3px solid;">
<div class="d-flex">
<a class="navbar-brand mx-sm-auto mr-auto" href=""> Honeybee Babies </a>
<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>
<div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
<ul class="navbar-nav justify-content-center">
<li class="nav-item rounded-pill" style="background-color: #C58940;">
<a class="nav-link" style="color: #FAF8F1" href="">Baby Essentials</a>
</li>
<li class="nav-item rounded-pill" style="background-color: #C58940;">
<a class="nav-link" style="color: #FAF8F1" href="">Price Range</a>
</li>
<li class="nav-item rounded-pill" style="background-color: #C58940;">
<a class="nav-link" style="color: #FAF8F1" href="">Brands</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" style="color: #C58940" type="submit">Search</button>
</form>
</div>
</nav>
我尝试在<ul class="navbar-nav">中使用justify-content-center，但不确定我做错了什么。
任何帮助/建议将不胜感激。
谢谢！
英文:
I am practicing how to create a navbar using Bootstrap 5 and can't get the links centered and below the navbar-brand.
I've attach an image of my current navbar.
My script:
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg flex-column align-items-stretch" style="background-color: #FAF8F1; border:3px solid;">
<div class="d-flex">
<a class="navbar-brand mx-sm-auto mr-auto" href=""> Honeybee Babies </a>
<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>
<div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
<unli class="navbar-nav">
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Baby Essentials</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Price Range</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Brands</a>
</li>
</unli>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" style="color:#C58940" type="submit">Search</button>
</form>
</div>
</div>
</nav>
I've tried using justify-content-center in <unli class="navbar-nav">
I'm not sure what I'm doing wrong.
Any help/advice would be appreciated.
Thanks!
答案1
得分: 0
将justify-content-center添加到navbar-collapse中。
请看下面的代码片段。
<div class="collapse navbar-collapse w-100 justify-content-center" id="navbarSupportedContent">
以上是翻译好的部分，没有其他内容。
英文:
Add justify-content-center to the navbar-collapse.
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg flex-column align-items-stretch" style="background-color: #FAF8F1; border:3px solid;">
<div class="d-flex">
<a class="navbar-brand mx-sm-auto mr-auto" href=""> Honeybee Babies </a>
<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>
<div class="collapse navbar-collapse w-100 justify-content-center" id="navbarSupportedContent">
<unli class="navbar-nav">
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Baby Essentials</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Price Range</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Brands</a>
</li>
</unli>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" style="color:#C58940" type="submit">Search</button>
</form>
</div>
</nav>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论