Bootstrap 4 navbar, с выпадающими меню и отзывчивый шаблон?

Question

Для B3 есть тонны шаблонов верхней навигационной панели с выпадающими меню. По мере того, как размер экрана становится небольшим, меню сворачивается к кнопке 3-бар, а меню становятся меню аккордеона.

Есть ли примеры или шаблоны, которые делают это с помощью Bootstrap 4? В ответных примерах, которые я обнаружил, свернуть меню и показать кнопку 3-бар, но меню не становятся меню аккордеона. Также есть много примеров для BS4, но не для них.

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

Answer 1

Мое решение это было бы просто добавить медиа-запрос к пользовательскому CSS, ориентированном размер экрана, где сжимают навигации, а затем укладывать элементы так, как вам нравится:

@media (max-width: 544px) { 
    .navbar-brand { 
    display:none; 
    } 
    .navbar-nav .nav-item { 
    float:none; 
    } 
    .navbar-nav .nav-item + .nav-item{ 
    margin-left:0; 
    } 
} 

Вот simple example on CodePen , Не очень сложный, но он должен проиллюстрировать суть.