Bootstrap 4 гибкое адаптивное навигационное меню

Question

Обратите внимание, что я спрашиваю не о том, как выровнять элементы в меню navbr (влево или вправо), а о том, как динамически перемещать элементы из панели навигации в выпадающий список.

Я используюBootstrap 4.1 в моем проекте.Мое главное главное меню содержит много ссылок.Последний элемент - это выпадающий список, который содержит дополнительные ссылки:

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

Что я хочу:

Но при изменении размера элементы уменьшаются.Затем для «md» (и меньших) точек останова активируется функция навигационной панели по умолчанию:

Решения с flexbox также приемлемы,Ссылка на простую демонстрацию с навигационной панелью Bootstrap по умолчанию: CodePen

<nav 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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 6</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 7</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu item 8</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown Menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Menu item 9</a>
          <a class="dropdown-item" href="#">Menu item 10</a>
          <a class="dropdown-item" href="#">About</a>
          <a class="dropdown-item" href="#">Help</a>
          <a class="dropdown-item" href="#">Sign out</a> 
        </div>
      </li>
    </ul>
  </div>
</nav>

Спасибо!

РЕДАКТИРОВАТЬ:

Этофункция изменения размера окна, над которой я сейчас работаю:

let addMenu = $("#navbarNavDropdown > ul >li.dropdown"),
    addMenuList = addMenu.children("ul"),
    menuItems = $("#navbarNavDropdown > ul > li:visible:not('.dropdown')");

function _resize() {
    var itemsWidth = 0,
        startWrap = false,
        navWidth = $("#navbarNavDropdown").width() - addMenu.width();
    menuItems.each(function () {
        if (startWrap == false) {
            if (itemsWidth + $(this).width() < navWidth) {
                itemsWidth += $(this).width();
            }
            else {
                startWrap = true;
                addMenuList.prepend(this);
            }
        }
        else {
            addMenuList.prepend(this);
        }
    });
}
window.onresize = _resize;

Ссылка выше также обновлена.

Работает, когда экран меньше, ноМне нужно реализовать:

• при увеличении ширины экрана;
• в точке останова "md" (или меньше), чтобы использовать функциональность начальной загрузки по умолчанию

Answer 1

Над ответом @Zim работает, как я и ожидал.Спасибо, @Zim!Я внес некоторые изменения для нужд своего проекта, например:

• Добавить «фиксированные» элементы в выпадающее меню, независимо от разрешения экрана.Они всегда будут в раскрывающемся списке;
• На мобильном устройстве уберите все элементы из раскрывающегося списка, чтобы работать с мобильной навигационной панелью Bootstrap по умолчанию;
• Добавьте разделитель раскрывающегося меню, чтобы отобразить над "исправлено""items.

Демонстрация здесь

$(function() {
var autocollapse = function (menu, maxHeight) {
    var nav = $(menu);

    if ($(window).width() <= 768) {
        $(menu + ' .additional-dropdown-menu').children(menu + ' li').each(function() {
            _moveDropdownItemToNavbar(this, nav, menu);
        });
        $(menu + ' .additional-menu').hide();
    }
    else {
        $(menu + ' .additional-menu').show();
        var navHeight = nav.innerHeight();
        if (navHeight >= maxHeight) {
            while (navHeight > maxHeight) {
                var children = nav.children(menu + ' li:not(:last-child)');
                var count = children.length;
                $(children[count - 1]).prependTo(menu + ' .additional-dropdown-menu').removeClass("nav-item").find("a").toggleClass("nav-link dropdown-item");
                navHeight = nav.innerHeight();
                $(menu + ' .additional-dropdown-menu .extra-divider').removeClass("d-md-none"); //show the extra divider when items is added to the additional dropdown
            }
        }
        else {
            var collapsed = $(menu + ' .additional-dropdown-menu').children(menu + ' li');

            if (collapsed.not(".additional-item-locked").length == 0) { //if there are only locked items - hide the extra divider. 
                $(menu + ' .additional-dropdown-menu .extra-divider').addClass("d-md-none");
            }
            while (navHeight < maxHeight && (nav.children(menu + ' li').length > 0) && collapsed.length > 0) {
                collapsed = $(menu + ' .additional-dropdown-menu').children('li:not(.additional-item-locked)');
                _moveDropdownItemToNavbar(collapsed[0], nav, menu);
                navHeight = nav.innerHeight();
            }

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

function _moveDropdownItemToNavbar(item, nav, menu) {
    $(item).insertBefore(nav.children(menu + ' li:last-child')).addClass("nav-item").find("a").toggleClass("nav-link dropdown-item");
}

autocollapse('#navbar > ul', 50);

// when the window is resized
$(window).on('resize', function () {
    autocollapse('#navbar > ul', 50);
});

});

Answer 2

Вместо этого используйте высоту, чтобы определить, когда элементы Navbar обернуты.Возможно, вам придется настроить JS для размещения других пунктов меню (О программе, Справка, Выход из системы).Вот функция jQuery для Bootstrap 4 ...

var autocollapse = function (menu,maxHeight) {

    var nav = $(menu);
    var navHeight = nav.innerHeight();
    if (navHeight >= maxHeight) {
        $(menu + ' .dropdown').removeClass('d-none');
        while (navHeight > maxHeight) {
            var children = nav.children(menu + ' li:not(:last-child)');
            var count = children.length;
            $(children[count - 1]).prependTo(menu + ' .dropdown-menu');
            navHeight = nav.innerHeight();
        }
    }
    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) {
            collapsed = $(menu + ' .dropdown-menu').children('li');
            $(collapsed[0]).insertBefore(nav.children(menu + ' li:last-child'));
            navHeight = nav.innerHeight();
        }

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


$(document).ready(function () {

    // when the page laods
    autocollapse('#nav',50); 

    // when the window is resized
    $(window).on('resize', function () {
        autocollapse('#nav',50); 
    });

});

Демо: https://www.codeply.com/go/wKWHgsMXah

Похожие: Bootstrap navbar скрывает элементы меню при изменении размера