Warum verschwindet meine Bootstrap-Navbar auf kleineren Geräten?

Bootstrap-Navigationsleiste: Elemente verschwinden auf kleineren Geräten

Sie haben eine Bootstrap-Navigationsleiste mit einem markanten Logo in der Mitte entworfen, das jedoch verschwindet, wenn das Bildschirmgröße schrumpft. Auch das Hamburger-Menü bleibt verborgen. Dieses Problem kann durch die Berücksichtigung mehrerer Faktoren gelöst werden.

Darstellung der Navigationsleiste auf Mobilgeräten

Bootstrap basiert auf Medienabfragen, um das Verhalten der Navigationsleiste für verschiedene Bildschirmgrößen anzupassen. Die folgenden CSS-Klassen spielen eine entscheidende Rolle:

navbar-default (or navbar-light for Bootstrap 4+)
navbar-dark

Anwenden der Navbar-Klasse

Um eine korrekte Anzeige auf Mobilgeräten sicherzustellen, wenden Sie die entsprechende Navbar-Klasse auf Ihren Code an :

<nav>

Alternativ können Sie der Navigationsleiste eine benutzerdefinierte Hintergrundfarbe hinzufügen oder die Umschalttaste abdunkeln:

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

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

Das obige ist der detaillierte Inhalt vonWarum verschwindet meine Bootstrap-Navbar auf kleineren Geräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!