Bootstrap 4：如何阻止折叠菜单时导航栏内元素一同折叠

Absolutely! You can keep your logo and language toggle button fixed in place (no shifting or collapsing) when the hamburger menu is activated. The key is adjusting the navbar's flex layout structure to separate the persistent elements from the collapsible menu.

Modified HTML Code #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<!-- NAV BAR -->
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white d-flex justify-content-between">
  <!-- Persistent Logo (Left-Aligned) -->
  <a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
  
  <!-- Hamburger Toggle (Only Visible on Small Screens) -->
  <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- Persistent Language Toggle (Right-Aligned) -->
  <div class="btn-group btn-toggle lang mr-1 d-flex align-items-center">
    <input type="button" name="lang" class="btn" value="ENG">
    <input type="button" name="lang" class="btn active" value="SPA">
  </div>
  
  <!-- Collapsible Menu (Hidden on Small Screens Until Toggle Clicked) -->
  <div class="collapse navbar-collapse w-100" id="navbarTogglerDemo03">
    <ul class="navbar-nav mx-auto mt-2 mt-lg-0">
      <li class="nav-item">
        <a class="nav-link" href="#">PURPOSE</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">FAMILY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">AGRICULTURE</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ART</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

Updated CSS Code #

.logo { 
  max-width: 130px; 
}
.btn { 
  font-family: 'Muli', sans-serif; 
  font-weight: 900; 
  white-space: nowrap; /* Prevent button text from wrapping on small screens */
}
.btn { 
  background: rgb(142, 63, 41); 
  color: rgb(202, 171, 159); 
}
.active { 
  background: rgb(166, 73, 47); 
  color: white; 
}

/* Small screen adjustments for spacing */
@media (max-width: 991.98px) {
  .navbar {
    padding: 0.5rem 1rem;
  }
  .lang {
    margin-left: 0.5rem;
  }
}

Key Changes Explained #

• Flex Layout for Navbar: Added d-flex justify-content-between to the navbar container, forcing the logo and language toggle to stay anchored to the left and right edges respectively.
• Hamburger Placement: Used ml-auto on the toggler to push it to the right side (between the logo and language toggle) on small screens.
• Full-Width Collapsible Menu: Added w-100 to the navbar-collapse div so the expanded menu takes the full width of the screen below the persistent elements, avoiding overlap.
• Prevent Button Wrapping: The white-space: nowrap rule ensures the language button text doesn't break onto multiple lines on small screens.
• Responsive Spacing: The media query adjusts padding and margins to keep the layout clean on mobile devices.

With these changes, your logo and language toggle will stay fixed in their positions regardless of whether the hamburger menu is expanded or collapsed.

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