Heim >Web-Frontend >CSS-Tutorial >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:
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!