Bootstrap 4导航栏汉堡按钮能否实现固定选项+动态收纳功能？

Absolutely, this is totally achievable with Bootstrap 4 and a small amount of custom CSS/JavaScript. Let’s walk through each requirement and build it to match the behavior you described (similar to the-dots.com):

Step 1: Force the Hamburger Button to Always Show #

Bootstrap’s navbar toggler is hidden by default on screens larger than your chosen breakpoint (like lg). To make it visible across all screen sizes, add this custom CSS:

/* Ensure hamburger button stays visible everywhere */
.navbar-toggler {
  display: flex !important;
}

/* Adjust navbar layout to avoid overlapping elements */
.navbar {
  justify-content: space-between;
}

Step 2: Add Fixed Menu Items to the Hamburger Dropdown #

Create a dedicated section in your navbar collapse for fixed items (like Logout, Profile, etc.) that will always live in the hamburger menu, no matter the screen size. These won’t move around—they’re permanent in the dropdown.

Step 3: Display Dynamic Items in the Navbar by Default #

Place your regular navigation links (the ones that shift into the hamburger on small screens) in a separate container that’s visible on large screens. This keeps them front-and-center for desktop users.

Step 4: Move Dynamic Items to the Hamburger on Small Screens #

Instead of duplicating your dynamic links (which creates maintenance headaches), use a bit of JavaScript to move the entire container between the main navbar and the hamburger dropdown when the screen crosses your breakpoint.

Full Working Example #

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="mainNavbar">
  <a class="navbar-brand" href="#">Your Brand</a>
  
  <!-- Persistent hamburger button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Dynamic menu items: visible on large screens -->
  <div id="dynamicNavItems" class="navbar-nav d-lg-flex">
    <a class="nav-item nav-link active" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Discover</a>
    <a class="nav-item nav-link" href="#">Create</a>
  </div>

  <!-- Hamburger dropdown content -->
  <div class="collapse navbar-collapse" id="navbarDropdown">
    <!-- Fixed menu items (always in dropdown) -->
    <div class="navbar-nav fixed-nav-items">
      <a class="nav-item nav-link" href="#">Profile</a>
      <a class="nav-item nav-link" href="#">Settings</a>
      <a class="nav-item nav-link text-danger" href="#">Logout</a>
    </div>
    <!-- Placeholder for dynamic items on small screens -->
    <div id="dynamicItemsPlaceholder"></div>
  </div>
</nav>

JavaScript

// Match Bootstrap's default lg breakpoint (992px) - adjust to md/sm if needed
const NAV_BREAKPOINT = 992;

function adjustNavbarLayout() {
  const dynamicNav = document.getElementById('dynamicNavItems');
  const placeholder = document.getElementById('dynamicItemsPlaceholder');
  const navbar = document.getElementById('mainNavbar');

  if (window.innerWidth < NAV_BREAKPOINT) {
    // Move dynamic items into the hamburger dropdown on small screens
    if (dynamicNav.parentElement !== placeholder) {
      placeholder.appendChild(dynamicNav);
      dynamicNav.classList.remove('d-lg-flex');
      dynamicNav.classList.add('d-block');
    }
  } else {
    // Move dynamic items back to the main navbar on large screens
    if (dynamicNav.parentElement !== navbar) {
      // Insert right before the dropdown collapse
      navbar.insertBefore(dynamicNav, document.getElementById('navbarDropdown'));
      dynamicNav.classList.remove('d-block');
      dynamicNav.classList.add('d-lg-flex');
    }
  }
}

// Run on page load
adjustNavbarLayout();

// Run on window resize
window.addEventListener('resize', adjustNavbarLayout);

Optional Custom CSS (Polish)

/* Add visual separation between fixed and dynamic items in the dropdown */
.fixed-nav-items {
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Add spacing between dynamic items in the main navbar */
@media (min-width: 992px) {
  #dynamicNavItems .nav-link {
    margin-right: 1rem;
  }
}

Key Notes #

• The breakpoint uses Bootstrap’s default lg size (992px), but you can tweak NAV_BREAKPOINT to match md (768px) or sm (576px) if you want the shift to happen earlier.
• This approach keeps your markup DRY (no duplicate links) so you only have to update navigation items once.
• Fixed items stay anchored in the hamburger menu, while dynamic items adapt their location based on screen size.

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