Bootstrap 4 Navbar Taller On Tablet Screen among split behavior

Question

我正在为我的个人网站使用 Bootstrap 4。我遇到的问题是，在我的平板电脑上，顶部菜单分为两行：

"font awesome" 图标显示在顶行
每个图标的正下方是字体 awesome 图标代表的每个部分名称的一行。

是否可以将其强制为 j（例如我在电脑屏幕上看到的）或以其他方式变成 3 行菜单而不是分成 2 行？我想让菜单有我看到的电脑屏幕版本的最大高度。

网址是here

我想在平板电脑版本上显示的是一个三行菜单，有人会点击左上角，右上角是 "search" 和搜索提交按钮。

Answer 1

包含大量内容的导航很棘手...但我认为这会为您提供所需的内容，并且是显示此类导航的正确方式：

(1) 您有很多元素，并且想要在平板电脑上使用“3 行菜单”（称为汉堡菜单或汉堡包菜单）；这是通过属性: navbar-expand-xl 完成的，它基本上表示当设备分辨率为 1200 像素时，菜单应该从 "burger mode" 扩展到 "expanded mode"。您在导航元素上进行此更改，例如：

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

(2) 接下来，当菜单展开时，我们看到每个元素有 3 行，图标及其下方的名称，您可以使用以下样式设置它 css:

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

...继续强制"displayed all on one line"...您可能需要为不同的屏幕尺寸设置此属性（如果您不不要做我回答的第一点)

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

Bootstrap 4 Navbar Taller On Tablet Screen among split behavior

Bootstrap 4 Navbar Taller On Tablet Screen amongst split behavior

javascript

css

nav

font-awesome

bootstrap-4