如何使Bootstrap导航栏的navbar-brand与链接保持分组显示

Hey there! Let's get that navbar grouping sorted out. The issue you're seeing is almost certainly due to missing structural elements and incorrect attribute usage that Bootstrap relies on to keep your brand and nav links tied together across all screen sizes.

Here's the corrected, complete code that will keep your navbar-brand and navigation links grouped properly:

<nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top">
  <div class="container-fluid">
    <!-- Navbar Brand -->
    <a class="navbar-brand" href="#">Navbar</a>
    
    <!-- Toggle Button for Mobile -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent-5" aria-controls="navbarSupportedContent-5"
            aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- Collapsible Nav Content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent-5">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Key Fixes Explained: #

• Added container-fluid wrapper: This wraps all navbar content (brand, toggle button, nav links) in a responsive container, ensuring they stay visually grouped instead of spreading out across the viewport.
• Updated toggle button attributes: If you're using Bootstrap 5, you need data-bs- prefixes (instead of plain data-) for the toggle functionality. I also added accessibility attributes (aria-*) which are required for proper screen reader support.
• Removed manual collapsed class and inline style: The collapsed class is automatically managed by Bootstrap's JavaScript, so adding it manually can break the initial state. Inline styles can override Bootstrap's default layout rules.
• Properly wrapped nav links: The navbar-nav class ensures your links are styled as part of the navbar's navigation group, keeping them aligned with the brand correctly.

If you're using Bootstrap 4 instead of 5, just replace all data-bs- attributes with data- (e.g., data-toggle instead of data-bs-toggle) and the rest of the code will work the same.

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