javascript - Bootstrap 4 Navbar Taller 在平板电脑屏幕上的拆分行为

Question

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

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

是否有可能将其强制为 j(例如我在电脑屏幕上看到的)或以其他方式成为 3 行菜单而不是分成 2 行？我希望菜单具有我看到的计算机屏幕版本的最大高度。

网址是here

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

Answer 1

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

(1) 您有很多元素，并且想要在平板电脑上使用“3 行菜单”(称为汉堡菜单或汉堡包菜单)；这是通过属性完成的: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; }