Wie zeige ich das Bootstrap-Navbar-Logo und das Hamburger-Menü auf kleineren Geräten an?

Bootstrap-Navigationsleiste: Elemente auf kleineren Geräten anzeigen

Diese Frage befasst sich mit einem Problem, bei dem eine Bootstrap-Navigationsleiste mit einem Logobild auf kleineren Bildschirmen verschwindet , was die Anzeige des Logos und des Hamburger-Menüs behindert.

Die Lösung liegt in der Verwendung geeigneter Dienstprogrammklassen, die von Bootstrap bereitgestellt werden, um eine ordnungsgemäße Anzeige auf allen Geräten sicherzustellen.

Bootstrap 5:

Für Bootstrap 5 ist für die Anzeige des Hamburger-Icons die Einbindung der Klasse „navbar-light“ oder „navbar-dark“ notwendig. Fügen Sie einfach eine dieser Klassen zu Ihrer Navigationsleiste hinzu, und der Hamburger wird sichtbar.

Bootstrap 4 und früher:

Wenn Sie Bootstrap 4 oder früher verwenden Version können Sie eine der folgenden Lösungen verwenden:

• Hintergrundfarbe hinzufügen: Weisen Sie der Navigationsleiste eine Hintergrundfarbe zu, damit sie auch ohne festgelegte Hintergrundfarbe sichtbar ist Eigenschaft.
• Den Toggler abdunkeln:Ändern Sie die Hintergrundfarbe der Toggler-Symbolleisten, um einen besseren Kontrast zu erzielen und sie auffälliger zu machen.

Codeausschnitte:

Hintergrundfarbe:

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

Dunklerer Umschalter:

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

Bootstrap 4.0.0-Update:

In Bootstrap 4.0.0 ist die Klasse „navbar-default“ veraltet. Verwenden Sie stattdessen „navbar-light bg-light“ für eine helle Navigationsleiste oder „navbar-dark bg-dark“ für eine dunkle Navigationsleiste.

Das obige ist der detaillierte Inhalt vonWie zeige ich das Bootstrap-Navbar-Logo und das Hamburger-Menü auf kleineren Geräten an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!