调整大小时Bootstrap导航栏隐藏菜单元素 [英] Bootstrap navbar hide menu elements when resizing

问题描述

我有许多元素的标准bootstrap菜单，当我更改屏幕尺寸时，我想将这些菜单元素移到堆栈(其中3行按钮为)按钮中.

  <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>

有人知道怎么做吗?

解决方案

自适应Bootstrap Navbar只有两个状态" ...

• 折叠(垂直)
• 未折叠(水平)

navbar-expand-*类用于更改两个状态之间的断点.

在您的情况下，您想要保持非折叠"水平Navbar状态，但是根据需要将导航项逐渐移至折叠菜单. Bootstrap 4没有为此提供开箱即用"的解决方案.

但是，使用Bootstrap下拉菜单和一些jQuery逻辑，您可以将溢出的导航栏项逐渐移至下拉菜单.这是我为此编写的jQuery逻辑:

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);
        }
    }
}

演示: https://www.codeply.com/go/IETSah3bFG

这可以通过在调整屏幕大小(或加载页面)时检查导航栏的高度来工作.高度增加时，导航项将被包装，然后将项移至下拉菜单.如果没有包装的导航项目，则将这些项目从下拉列表中删除.

---

另请参见:导航栏样式

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?

解决方案

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://www.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

这篇关于调整大小时Bootstrap导航栏隐藏菜单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！