Bootstrap 4 Navbar Taller на экране планшета среди раздельного поведения

Question

Я использую Bootstrap 4 для моего личного веб-сайта. У меня проблема в том, что на моем планшете главное меню разделено на две строки:

• Значок "Шрифт потрясающий" отображается в верхней строке
• Сразу под каждым значком находится строка с названием каждого раздела, который представляет собой шрифт.

Можно ли заставить это быть j (например, то, что я вижу на экране моего компьютера) или иначе стать 3-строчным меню вместо разделения на 2 строки? Я хочу, чтобы в меню была максимальная высота версии экрана компьютера, которую я вижу.

Веб-сайт здесь

То, что я хочу отобразить в версии для планшета, - это трехстрочное меню, которое кто-то нажмет в левом верхнем углу, а в правом верхнем углу будут кнопки «Поиск» и «Поиск».

Answer 1

Навигация с большим количеством контента сложна ... но я думаю, что это то, что вам нужно, и правильный способ отображения такой навигации:

(1) У вас есть много элементов, и вы хотите, чтобы на планшете было «меню из трех строк» ​​(которое называется меню гамбургеров или меню гамбургеров);это делается с помощью свойства: navbar-expand-xl, которое в основном сообщает, что меню должно быть расширено из «режима бургера» в «расширенный режим», когда разрешение устройства составляет 1200 пикселей.Вы вносите это изменение в элемент навигации, например:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

(2) Далее, когда меню расширено, мы видим 3 строки для каждого элемента, значок и его название под ним, вы можете стилизовать его с помощью следующего CSS:

.navbar-expand-xl .navbar-nav { display: -webkit-inline-box; }

... чтобы продолжить принудительно отображать "все в одной строке" ... вам может потребоваться установить это свойство для разных размеров экрана ( если вы не укажете пункт 1 моего ответа )

.navbar-expand-lg .navbar-nav { display: -webkit-inline-box; }
/* or */
.navbar-expand-md .navbar-nav { display: -webkit-inline-box; }