引导导航菜单答案

【问题标题】：Bootstrap navigation menu引导导航菜单
【发布时间】：2022-01-06 15:17:24
【问题描述】：

我是 Bootstrap 的新手，我正在尝试构建一个三栏导航菜单，其中导航链接位于中间。我可以使用网格或 flexbox 在五分钟内构建它，但对于我的生活，我无法将导航链接居中！ picture for reference.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/resources/images/Babyboom_logo_main.png" width="200" height="50"  alt="BabyBoom logo" class="navbar-brand">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <col>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
    <a class="nav-link" href="#">Sessions</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="col-sm">
<a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
</div>
</div>
</nav>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

尝试使用 mx-auto。下面的代码应该适合你:)

<html>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" ></script>
              <div class="row ">
                 <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <img src="/resources/images/Babyboom_logo_main.png" width="200" height="50"  alt="BabyBoom logo" class="navbar-brand">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="col-md-9 ">
                       <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="col-md-3 navbar-nav mx-auto">
                             <li class="nav-item">
                                <a class="nav-link" href="#">Sessions</a>
                             </li>
                             <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                             </li>
                          </ul>
                       </div>
                    </div>
                    <div class="col-md-2">
                       <a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
                    </div>
              </div>
              </div>
              </nav>
              <!-- end snippet -->
</html>

【讨论】：

【解决方案2】：

你可以通过两种方式做到这一点

通过将 mx-auto 类添加到 ul 标记，即

    <ul class="col-md-3 navbar-nav mx-auto">

通过将 justify-content-center 添加到折叠 div

 <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">

希望它对你有用:)

【讨论】：

您好，感谢您的评论。我已经尝试了这两个例子，但没有运气:(
那你能检查一下你正在使用的bootstrap版本还是验证你的项目中是否添加了bootstrap。