Bootstrap 4 рухнул навбар с 2 колонками

Question

Я хочу, чтобы моя свернутая панель навигации отображалась в 2 столбцах.Я использую bootstrap 4.

Полноразмерная панель навигации выглядит следующим образом:

http://prntscr.com/kymuzq

И свернутая панель навигации выглядит так:

http://prntscr.com/kymtun

Кто-нибудь знает простой способ сделать свернутую панель навигации с двумя столбцами, чтобы отображался каждый элемент списка?Так что 5 слева и 5 справа.

Очень благодарен за любую помощь.

Answer 1

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

Добавьте к элементу с классом .navbar.nav следующие классы:

.flex-row

Элементы находятся в строке, а не в столбце

.flex-wrap

Элемент nav оборачивает дочерний элемент

Кроме того, вы должны использовать col-6 для каждого элемента .nav, поэтомуон разделяется на два столбца.

<ul class="navbar-nav mr-auto flex-wrap flex-row">
        <li class="nav-item active col-6">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item col-6">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item col-6">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
</ul>

Затем следует использовать правильную разметку для различных точек останова