Bootstrap navbar-right类无法将导航项右对齐问题求助

Hey there! The problem you're hitting is that navbar-right is a Bootstrap 3-specific class, but your code is using Bootstrap 4 (you can spot this from classes like navbar-expand-md and the modern navbar structure). Bootstrap 4 switched to flexbox for layout, so that old class no longer works.

The Solution: Use ml-auto Instead #

Replace the navbar-right class with ml-auto on your second <ul> element. The ml-auto utility class adds margin-left: auto to the element, which flexbox uses to push the entire list to the far right of the navbar container.

Modified Code #

<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="/index.php"><img src="/assets/img/logo_white.png" style="height: 35px;"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav navbar-nav">
      <li class="nav-item <?php if ($sect == 'home') { echo 'active';} ?>">
        <a class="nav-link" href="/index.php">Home</a>
      </li>
      <li class="nav-item dropdown <?php if ($sect == 'about') { echo 'active';} ?>">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          About
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item <?php if ($page == 'about-us') { echo 'active';} ?>" href="/about/about-us.php">About Us</a>
          <a class="dropdown-item <?php if ($page == 'staff') { echo 'active';} ?>" href="/about/staff.php">Staff Team</a>
          <a class="dropdown-item <?php if ($page == 'partners') { echo 'active';} ?>" href="/about/partners.php">Partners</a>
        </div>
      </li>
      <li class="nav-item dropdown <?php if ($sect == 'resources') { echo 'active';} ?>">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Resources
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item <?php if ($page == 'downloads') { echo 'active';} ?>" href="/resources/downloads.php">Downloads</a>
          <a class="dropdown-item <?php if ($page == 'charts') { echo 'active';} ?>" href="/resources/charts.php">Charts</a>
          <a class="dropdown-item <?php if ($page == 'metar') { echo 'active';} ?>" href="/resources/metar.php">METAR Decoder</a>
        </div>
      </li>
      <li class="nav-item <?php if ($sect == 'academy') { echo 'active';} ?>">
        <a class="nav-link" href="/academy/index.php">Academy</a>
      </li>
      <li class="nav-item <?php if ($sect == 'fly') { echo 'active';} ?>">
        <a class="nav-link disabled" href="#">Fly</a>
      </li>
      <li class="nav-item <?php if ($sect == 'forums') { echo 'active';} ?>">
        <a class="nav-link" href="https://forums.multicrew.co.uk/">Forums</a>
      </li>
      <li class="nav-item <?php if ($sect == 'book') { echo 'active';} ?>">
        <a class="nav-link" href="https://multicrew.setmore.com/">Book</a>
      </li>
    </ul>
    <!-- Replaced navbar-right with ml-auto here -->
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="https://portal.multicrew.co.uk/"><i class="fa fa-sign-in"></i> Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://portal.multicrew.co.uk/register"><i class="fa fa-user"></i> Register</a>
      </li>
    </ul>
  </div>
</nav>
<!--/END Navbar-->

Why This Works #

Bootstrap 4's navbar uses flexbox for layout. The ml-auto class tells the flex container to allocate all available space to the left of this <ul>, which pushes it all the way to the right. This is the official recommended way to align nav items to the right in Bootstrap 4+, replacing the deprecated navbar-right class from Bootstrap 3.

内容的提问来源于stack exchange，提问作者Calum Shepherd