Heim >Web-Frontend >CSS-Tutorial >Wie zeige ich das Bootstrap-Navbar-Logo und das Hamburger-Menü auf kleineren Geräten an?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-06 00:02:02496Durchsuche

How to Display Bootstrap Navbar Logo and Hamburger Menu on  Smaller Devices?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn