Bootstrap4折叠菜单点击后挤压头部内容问题求助

Got it, let's work through this issue step by step. The problem you're seeing—your header content getting squeezed to the middle when opening the hamburger menu on sm-sized screens—stems from a mix of small code typos and a responsive layout misconfiguration.

First: Fix Critical Typos in Your Code #

Your HTML has a few Bootstrap-specific typos that can break functionality and layout, so let's correct those first:

• sronly → sr-only (this is the proper screen-reader-only class)
• datatoggle → data-toggle (required for dropdown functionality)
• arialabelledby → aria-labelledby (accessibility attribute)
• Missing quote in <div class="collapse navbar-collapse id="navbarSupportedContent"> → should be <div class="collapse navbar-collapse" id="navbarSupportedContent">

Here's the cleaned-up base code:

<nav class="navbar navbar-expand-md navbar-dark">
  <a class="navbar-brand m-0" href="#">
    <img src="images/Untitled-2.png" style="width:235px">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">HOME<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ABOUT</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          WORK
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">GALLERY</a>
          <a class="dropdown-item" href="#">VIDEO</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

Second: Fix the Layout Squeeze on sm Breakpoint #

The core issue here is the mx-auto class on your navbar-nav. This class applies horizontal auto margins on all screen sizes, which means even when the menu collapses on sm screens, the nav list tries to center itself—pushing against your brand logo and hamburger button.

Solution 1: Use Bootstrap's Responsive Margin Classes #

Replace mx-auto with mx-md-auto. This will only apply the horizontal centering on md-sized screens and above (where your menu is expanded), while letting the collapsed nav stack normally on sm screens:

<ul class="navbar-nav mx-md-auto">

Solution 2: Custom CSS for More Control #

If you want to tweak the mobile layout further, add this custom CSS to adjust the collapsed nav behavior:

/* Target screens smaller than md (768px) */
@media (max-width: 767.98px) {
  #navbarSupportedContent .navbar-nav {
    margin-left: 0; /* Remove centering margin on mobile */
    padding-left: 1rem; /* Optional: Add left padding for better spacing */
  }
  /* Optional: Shrink logo on mobile to avoid width issues */
  .navbar-brand img {
    max-width: 180px;
    height: auto;
  }
}

Bonus: Improve Header Spacing #

To make sure your brand logo and hamburger button stay properly separated on mobile, add the justify-content-between class to your navbar:

<nav class="navbar navbar-expand-md navbar-dark justify-content-between">

This will pin the brand to the left and the hamburger button to the right on sm screens, preventing any overlap when the menu opens.

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