如何在較小的裝置上顯示 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中文網其他相關文章！