在 Bootstrap 4 中重新定位导航栏的元素

Question

我是 Bootstrap 的新手。

在 Bootstrap 4 中，我想使用固定顶部的品牌导航栏。导航栏应显示品牌、6 个导航项和一个下拉列表：

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Item1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item6</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">dropdown item 1</a>
          <a class="dropdown-item" href="#">dropdown item 2</a>
          <a class="dropdown-item" href="#">dropdown item 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

在大视口上，页面将显示在 1,200 像素宽度的容器中。

我想修改 Navbar 元素的水平位置，使 6 个导航项在 1,200px 容器中水平居中，品牌元素在容器的左开始处结束，下拉元素在右结束处开始容器：

在较小的视口上，导航栏应该遵循其标准行为，即它应该折叠并显示汉堡包（它集成了 6 个菜单项以及下拉菜单），并且品牌元素应该从视口左侧水平开始。

我该如何实现？

编辑：

这段代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav m-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item6</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
            Dropdown
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">dropdown item 1</a>
            <a class="dropdown-item" href="#">dropdown item 2</a>
            <a class="dropdown-item" href="#">dropdown item 3</a>
          </div>
        </li>
      </ul>
    </div>
    </div>
  </nav>

给出这个结果： 变化是：

• <div class="container"> 在<nav...> 之后。这给出了 1200 像素的容器。
• 两个<ul class="navbar-nav"> 而不是一个。这会将 6 个导航项与下拉列表分开。
• 第一个<ul class="navbar-nav"> 使用m-auto。这会将 6 个导航项居中并将下拉菜单推到右侧。

但是结果并不如应有的那样。品牌元素应在居中 1200px 的左端结束，下拉元素应从居中 1200px 的右端开始：

如何解决这个问题？

Answer 1

在div.navbar-nav上添加类mx-lg-auto

mx-auto 将您的元素居中，而lg 部分将检查视口宽度是否为 1200 像素或更大。

小提琴：https://jsfiddle.net/oLet2w6k/

引导文档：https://getbootstrap.com/docs/4.3/utilities/spacing/#horizontal-centering

Answer 2

试试这个代码：

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
    <a class="navbar-brand mr-0" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
      <ul class="navbar-nav mx-auto text-md-center text-left">
        <li class="nav-item active">
          <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item6</a>
        </li>
      </ul>
      <div class="nav-item dropdown flex-row justify-content-md-center justify-content-start flex-nowrap">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">dropdown item 1</a>
          <a class="dropdown-item" href="#">dropdown item 2</a>
          <a class="dropdown-item" href="#">dropdown item 3</a>
        </div>
      </div>
    </div>
  </nav>