如何实现Bootstrap导航栏展开时隐藏顶部标题并居中导航栏？

Got it, let's sort this out step by step. The core issue here is that when your navbar expands, the top title is still hogging 75% of the screen width, leaving only 25% for the navbar items—so they get squished or cut off entirely. Here are two reliable solutions to fix this:

Solution 1: CSS-Only (Using Bootstrap's Built-in Classes & :has Selector) #

This approach leverages Bootstrap's native collapse state classes and modern CSS to avoid extra JavaScript. First, let's make sure your HTML structure is set up correctly (adjust to match your actual code):

<div class="row">
  <div id="titleRe" class="col-md-12">
    <h1>Your Top Title</h1>
  </div>
  <nav id="navRe" class="col-md-12 navbar navbar-expand-md navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <!-- Add mx-auto to center nav items by default -->
      <ul class="navbar-nav mx-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
</div>

Now update your CSS media query to handle the expanded state:

@media only screen and (max-width: 500px) {
  #titleRe { width: 75%; }
  #navRe { width: 25%; padding-top: 1.5rem; }

  /* Hide the title when the navbar is expanded */
  #navRe:has(.navbar-collapse.show) ~ #titleRe {
    display: none;
  }

  /* Make the navbar take full width when expanded */
  #navRe:has(.navbar-collapse.show) {
    width: 100%;
    padding-top: 0;
  }
}

Note: #

The :has selector works in modern browsers (Chrome 105+, Firefox 121+, Edge 105+). If you need support for older browsers, use the JavaScript solution below.

Solution 2: JavaScript (For Wider Browser Support) #

This uses Bootstrap's collapse event listeners to manually toggle the title's visibility and adjust the navbar layout:

First, keep the same HTML structure (with mx-auto on .navbar-nav for centering). Then add this script:

// Grab elements we need
const navbarCollapse = document.getElementById('navbarContent');
const titleElement = document.getElementById('titleRe');
const navbarElement = document.getElementById('navRe');

// When navbar expands
navbarCollapse.addEventListener('shown.bs.collapse', () => {
  titleElement.style.display = 'none';
  navbarElement.style.width = '100%';
  navbarElement.style.paddingTop = '0';
});

// When navbar collapses back
navbarCollapse.addEventListener('hidden.bs.collapse', () => {
  titleElement.style.display = 'block';
  navbarElement.style.width = '25%';
  navbarElement.style.paddingTop = '1.5rem';
});

Why This Works: #

• When the navbar is collapsed, your original 75%/25% width split stays intact for the title and toggle button.
• When expanded, we hide the title entirely, let the navbar take full screen width, and use Bootstrap's mx-auto class to center the nav items perfectly.

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