调整大小时引导导航栏隐藏菜单元素

Question

I have standard bootstrap menu with many elements and I would like to move those menu elements into stack (where 3 line button are ) button when I change screen size.

  <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
  <a class="navbar-brand" href="#">Top navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Does anyone know how to to that?

Answer 1

The responsive Bootstrap Navbar has only two "states"...

• Collapsed (vertical)
• Non-collapsed (horizontal)

The navbar-expand-* class is used to change the breakpoint between the two states.

In your case, you want to maintain the "non-collapsed" horizontal Navbar state, but gradually move nav items to a collapsed menu as needed. Bootstrap 4 doesn't provide an "out-of-the-box" solution for this.

However, using the Bootstrap dropdown menu, and some jQuery logic you can progressively move the overflowing navbar items to the dropdown. Here's the jQuery logic I wrote for this:

var autocollapse = function (menu,maxHeight) {
    
    var nav = $(menu);
    var navHeight = nav.innerHeight();
    if (navHeight >= maxHeight) {
        $(menu + ' .dropdown').removeClass('d-none');
        $(".navbar-nav").removeClass('w-auto').addClass("w-100");
        while (navHeight > maxHeight) {
            //  add child to dropdown
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
        $(".navbar-nav").addClass("w-auto").removeClass('w-100');
    }
    else {
        var collapsed = $(menu + ' .dropdown-menu').children(menu + ' li');
      
        if (collapsed.length===0) {
          $(menu + ' .dropdown').addClass('d-none');
        }
      
        while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
            //  remove child from dropdown
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

        if (navHeight > maxHeight) { 
            autocollapse(menu,maxHeight);
        }
    }
}

Demo: https://codeply.com/go/IETSah3bFG

This works by checking the height of the Navbar as the screen is resized (or page loaded). When the height has increased, the nav items have wrapped and then items are moved to the dropdown. When there are no wrapping nav items, the items are removed from the dropdown.

---

Also see: "Mashable" style navbar