如何在较小的设备上显示 Bootstrap 导航栏徽标和汉堡菜单？

Bootstrap Navbar：在较小的设备上显示元素

此问题解决了带有徽标图像的 Bootstrap 导航栏在较小的屏幕上消失的问题，阻碍了徽标和汉堡菜单的显示。

解决方案在于使用 Bootstrap 提供的适当实用程序类来确保跨设备正确显示。

Bootstrap 5:

对于 Bootstrap 5，包含“navbar-light”或“navbar-dark”类对于显示汉堡包图标是必要的。只需将这些类之一添加到导航栏，汉堡包就会变得可见。

Bootstrap 4 及更早版本：

如果您使用的是 Bootstrap 4 或更早版本版本，您可以采用以下解决方案之一：

• 添加背景颜色：为导航栏分配背景颜色，使其即使没有指定背景颜色也可见属性。
• 使切换器变暗：修改切换器图标栏的背景颜色以提供更好的对比度并使它们更明显。

代码片段：

背景颜色：

#navbar-primary .navbar-nav {
    background: #ededed;
}

深色切换器：

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

Bootstrap 4.0.0 更新：

在 Bootstrap 4.0.0 中，“navbar-default”类已被弃用。相反，请使用“navbar-light bg-light”作为浅色导航栏，或使用“navbar-dark bg-dark”作为深色导航栏。

以上是如何在较小的设备上显示 Bootstrap 导航栏徽标和汉堡菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！