如何将Navbar元素居中？实现'Try Again'居中及响应式布局

Got it, let's get your navigation bar sorted! The main issue with your current code is that splitting the nav items into three separate <ul> elements makes it tricky to align the "Try Again" link exactly between the left and right sections. Here's a straightforward solution using Bootstrap's flex utilities plus a tiny bit of custom CSS to ensure it works responsively:

Step 1: Restructure the HTML #

We'll combine all your nav items into a single <ul> container that spans the full width of the navbar. This lets us use flexbox to distribute the space properly:

<nav class="navbar navbar-expand-md navbar-light">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav w-100 justify-content-between align-items-center">
        <!-- Left Section -->
        <li class="nav-item">
          <a class="nav-link" href="#">NEW COLORS <span class="sr-only">(current)</span></a>
        </li>
        
        <!-- Center Section -->
        <li class="nav-item flex-grow-1 text-center">
          <a class="nav-link" href="#">Try Again <span class="sr-only">(current)</span></a>
        </li>
        
        <!-- Right Section -->
        <div class="d-flex">
          <li class="nav-item">
            <a class="nav-link" href="#">EASY <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">HARD</a>
          </li>
        </div>
      </ul>
    </div>
  </div>
</nav>

Step 2: Add Custom CSS (for perfect centering) #

To ensure the center link stays perfectly aligned even as screen sizes change, add this small snippet to your stylesheet:

@media (min-width: 768px) {
  .navbar-nav .flex-grow-1 {
    flex: 1;
    margin: 0 auto;
    text-align: center;
  }
}

Key Changes Explained: #

• w-100 on the main <ul> makes it take up the full width of the navbar container, so we have space to work with.
• justify-content-between pushes the left and right sections to the edges of the navbar automatically.
• flex-grow-1 on the center <li> lets it fill the remaining gap between left and right items, keeping "Try Again" centered no matter how wide the screen gets.
• navbar-expand-md ensures the horizontal layout stays intact on medium screens and above; on smaller devices, the navbar collapses into a hamburger menu (adjust to navbar-expand-lg or navbar-expand-sm if you want a different breakpoint).

Why Your Previous Flex Attempts Failed #

Splitting the nav into three separate <ul> elements meant each list was treated as an independent flex item. By combining everything into one container, we can control spacing and alignment far more precisely with Bootstrap's built-in tools.

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