Как сделать такое меню на bootstrap 4?

Question

[WebforSelf]

Ума не приложу почему в бустрап 4 меню не адаптируется.

Создаю меню (нужно как на скрине)


По итогу получается

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>	

    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul id="menu-menyu-kataloga" class="navbar-nav mr-auto mt-2 mt-lg-0 "><li id="menu-item-1248" class=" dropdown nav-item nav-item-1248"><a href="individualnye-programmy/" class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">Индивидуальные программы</a>
<ul class="dropdown-menu depth_0">
	<li id="menu-item-1255" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1255"><a class="dropdown-item" href="sample-page/">Пример страницы</a></li>
</ul>
</li>
<li id="menu-item-1249" class=" dropdown nav-item nav-item-1249"><a href="obuchayushhie-treningi-i-seminary/" class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">Обучающие тренинги и семинары</a>
<ul class="dropdown-menu depth_0">
	<li id="menu-item-1256" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1256"><a class="dropdown-item" href="sample-page/">Пример страницы</a></li>
</ul>
</li>
<li id="menu-item-1250" class=" dropdown nav-item nav-item-1250"><a href="obuchenie-po-rabochim-professiyam/" class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">Обучение по рабочим профессиям</a>
<ul class="dropdown-menu depth_0">
	<li id="menu-item-1257" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1257"><a class="dropdown-item" href="sample-page/">Пример страницы</a></li>
</ul>
</li>
<li id="menu-item-1251" class=" dropdown nav-item nav-item-1251"><a href="kvalifikacziya-personala/" class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">Квалификация персонала</a>
<ul class="dropdown-menu depth_0">
	<li id="menu-item-1258" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1258"><a class="dropdown-item" href="sample-page/">Пример страницы</a></li>
</ul>
</li>
<li id="menu-item-1252" class=" dropdown nav-item nav-item-1252"><a href="promyshlennaya-bezopasnost/" class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">Промышленная безопасность</a>
<ul class="dropdown-menu depth_0">
	<li id="menu-item-1259" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1259"><a class="dropdown-item" href="sample-page/">Пример страницы</a></li>
</ul>
</li>
<li id="menu-item-1253" class=" dropdown nav-item nav-item-1253"><a href="pozharno-tehnicheskij-minimum/" class="nav-link dropdown-toggle" aria-haspopup="true" aria-expanded="false">Пожарно-технический минимум</a>
<ul class="dropdown-menu depth_0">
	<li id="menu-item-1260" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-1260"><a class="dropdown-item" href="sample-page/">Пример страницы</a></li>
</ul>
</li>
</ul>    </div>

</nav>

но на выходе имею



Как сделать чтоб количество пунктов всегда растягивалось на ширину container ( как в бустрапе 3)

Например 3 пункта, они на ширину контейнера текст в одну строку у пунктов, потом добавил еще 2. Блоки уменьшаются но также умещаются в контейнер. Почему то на бустрап 3 это было гораздно проще...

Comments

[Антон]

Не использовать бутстрап пробовали?

[WebforSelf]

Антон, Ну как вариант) Но вопросов появляется два)
Что посоветуйте использовать?
Раз уже тут бустрап, как жить с ним?

Answer 1

[WebforSelf]

Мой вопрос решить должен данный код, задаем ширину и распологаем флекс элементы на всю ширину, но что с этим кодом, что без него. Меню вылазит за границы container. Почему так?

.navbar-nav {
    width:100%;
    justify-content: space-around;
}

Comments

[Andrew]

Потому что не вмещается?
flex-wrap: wrap;

[WebforSelf]

Andrew, Подскажи пожалуйста, обернул в wrap



Но суть такая что он переносит вниз, а как сделать чтоб он просто уменьшал пункты меню и и в 2 строки были сами пункты , но в одну строку.

[Andrew]

WebforSelf, задать им ширину/шрифт в процентах?

[WebforSelf]

Andrew, они ж динамичные? т.е. при добавлении пункта они еще больше ужмутся чтоб в ряд быть.

[Andrew]

WebforSelf, а как вы себе представляете это должно работать?
они любой ширины, не помещаются - переносятся или что должно происходить?