Bootstrap 4 - Nav - Скрытие дополнительных пунктов меню

Ответ 1

Вы можете использовать навигационную панель в качестве данного примера.

При изменении размера браузера элементы навигации будут перемещены внутри выпадающего списка, если у него недостаточно места.

Демо

[1]: http://jsfiddle.net/swasatz/3fn4d5oq/

Демо-версия

Откройте фрагмент в полноэкранном режиме и измените размер браузера, чтобы увидеть изменения.

$(document).ready(function () {
    var menu = $("#nav-bar-filter"),
        subMenu = $(".subfilter"),
        more = $("#more-nav"),
        parent = $(".filter-wrapper"),
        ww = $(window).width(),
        smw = more.outerWidth();

    menu.children("li").each(function () {
        var w = $(this).outerWidth();
        if (w > smw) smw = w + 20;
        return smw
    });
    more.css('width', smw);

    function contract() {
        var w = 0,
            outerWidth = parent.width() - smw - 50;
        for (i = 0; i < menu.children("li").size(); i++) {
            w += menu.children("li").eq(i).outerWidth();
            if (w > outerWidth) {
                menu.children("li").eq(i - 1).nextAll()
                    .detach()
                    .css('opacity', 0)
                    .prependTo(".subfilter")
                    .stop().animate({
                    'opacity': 1
                }, 300);
                break;
            }
        }
    }

    function expand() {
        var w = 0,
            outerWidth = parent.width() - smw - 20;
        menu.children("li").each(function () {
            w += $(this).outerWidth();
            return w;
        });
        for (i = 0; i < subMenu.children("li").size(); i++) {
            w += subMenu.children("li").eq(i).outerWidth();
            if (w > outerWidth) {
                var a = 0;
                while (a < i) {
                    subMenu.children("li").eq(a)
                        .css('opacity', 0)
                        .detach()
                        .appendTo("#nav-bar-filter")
                        .stop().animate({
                        'opacity': 1
                    }, 300);
                    a++;
                }
                break;
            }
        }
    }
    contract();

    $(window).on("resize", function (e) {
        ($(window).width() > ww) ? expand() : contract();
        ww = $(window).width();
    });

});

body {
    font-family: verdana;
    min-width: 250px;
}
ul#more-nav, ul#nav-bar-filter {
    display: inline-block;
    vertical-align: top;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    padding: 4px 8px 4px 8px;
    margin: 0;
}
#nav-bar-filter li {
    display: inline-block;
    font-weight: bold;
}
a {
    text-decoration: none;
    color: #666;
    font-size: 13px;
}
.filter-wrapper {
    width: 100%;
    background: #eee;
    padding: 5px 10px 5px 10px;
}
#more-nav {
    float: right;
}
.subfilter{
    padding-top: 10px;
}
.subfilter li {
    margin: 0 0 0 20px;
    padding: 5px 0 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="twelve columns filter-wrapper">
    <ul class="nav-bar-filter" id="nav-bar-filter">
        <li><a href="#">All</a> 
        </li>
        <li><a href="#">Small</a>

        </li>
        <li><a href="#">Medium</a>

        </li>
        <li><a href="#">Extra large</a>

        </li>
        <li><a href="#">Text</a>

        </li>
        <li><a href="#">Small-1</a>

        </li>
        <li><a href="#">Medium-1</a>

        </li>
        <li><a href="#">Extra large text</a>

        </li>
        <li><a href="#">Large text</a>

        </li>
        <li><a href="#">Another text</a>

        </li>
        <li><a href="#">text</a>

        </li>
    </ul>
    <ul id="more-nav">
        <li><b><a href="#">More &gt;</a></b>

            <ul class="subfilter"></ul>
        </li>
    </ul>
</div>

Ответ 2

(ОБНОВЛЕНО ОТВЕТ). Вы можете использовать jQuery для отображения навигационных меню, которые вписываются в окно, и скрыть остальные:

JQuery

$(window).resize(function() {
    var winwidth=$(window).width(),totwidth=$('.navbar .navbar-brand').outerWidth(),shownnum=0;
    var navs=$('.navbar .nav-item');
    navs.each(function(i) {
        totwidth+=$(this).outerWidth();
        if(totwidth<winwidth) shownnum=i+1; else return false;
    });
    navs.show().slice(shownnum).hide();
});

CSS

.navbar {overflow:hidden}
.nav-item {white-space:nowrap}

Fiddle: https://www.bootply.com/59hJN5jFZo

Ответ 3

Для элементов меню, которые вы хотите просмотреть как скрытые на мобильных устройствах, оберните прокрутку вокруг элементов списка, которые вы хотите скрыть, и добавьте скрытые значения бутстрапа 4 beta, как это.

<span class="d-none d-xs-block">
  <li class="nav-item">
    <a class="nav-link" href="#">aaaaaaaa 1234 </a>
  </li>
</span>

Вы также можете применить класс к тегу <a>, чтобы скрыть эту конкретную ссылку в раскрывающемся меню. Кроме того, возиться с классом d-xs-block для соответствия вашим требованиям.

Я хотел бы предоставить вам несколько источников, которые помогут вам в отношении сокрытия элементов в определенных точках останова.

https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4
https://www.codeply.com/go/bRlHp8MxtJ

Ответ 4

увеличьте ширину меню div или break после скрытия меню.

Ответ 5

Следующий фрагмент реализует "мега-меню" (аналогично Yamm3 Megamenu для Bootstrap 3, cf. http://geedmo.github.io/yamm3/) на основе Bootstrap 4 flexbox классы:

<!-- adapted from bs-repo basic navbar example code -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button"
          data-toggle="collapse" data-target="#navbarSupportedContent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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="#">Other</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="..."
           id="navbarDropdownMenuLink" data-toggle="dropdown">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <ul class="d-md-inline-flex flex-md-row">
            <li class="dropdown-item">
              <ul class="d-md-inline-flex flex-md-column">
                <li class="dropdown-item"><a href="#">Action</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
              </ul>
            </li>
            <li class="dropdown-item">
              <ul class="d-md-inline-flex flex-md-column">
                <li class="dropdown-item"><a href="#">Action</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
              </ul>
            </li>
            <li class="dropdown-item">
              <ul class="d-md-inline-flex flex-md-column">
                <li class="dropdown-item"><a href="#">Action</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
                <li class="dropdown-item"><a href="#">Another</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text"
             placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0"
              type="submit">Search</button>
    </form>
  </div>
</nav>

По сравнению с примером базового навигационного примера Bootstrap, здесь div для dropdown-menu, содержащего ul, составляющего меню, поскольку display: flex не работает с display: none, как динамически устанавливается с помощью раскрывающегося списка Bootstrap script (popper.js).

Этот вариант применяет раскладку гибких строк на разрешениях md и вверх, применяя форматирование простого неупорядоченного списка по разрешениям ниже md.

Ответ 6

Вот естественное решение Bootstrap 4, без необходимости использования JS или дополнительного CSS. Вместо использования ul вы можете использовать div в соответствии с документацией и использовать свойство display для отображения или скрытия определенных элементов в navbar, включая выпадающее меню в зависимости от размера экрана.

Вот что говорит документация:

потому что мы используем классы для наших навигаторов, вы можете полностью отказаться от подхода на основе списка, если хотите. навигационная документация

Вот пример, я добавил dropdown как div тоже:

<div class="navbar-nav ml-auto">
    <a class="nav-item nav-link" href="#">How does it work</a>
    <a class="nav-item nav-link" href="#">Demo</a>
    <div class="nav-item dropdown" href="#">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <a class="nav-item nav-link d-block d-lg-none d-xl-none" href="#">Show only on md and down</a>
    <a class="nav-item nav-link d-none d-lg-block d-md-block" href="#">Show on md and lg</a>
</div>

Это работающее собственное решение. Вы можете показать/скрыть любой элемент навигации таким образом на любом размере экрана, и он будет отображаться в мобильном меню тоже при свертывании.

P.S. нет необходимости в переполнении: скрыто тоже

Удачи!