Bootstrap-Navigationsleiste: Behebung verschwindender Elemente auf kleineren Geräten
Beim Entwerfen einer Bootstrap-Navigationsleiste mit einem zentralen Logo und Menüelementen ist es wichtig, dies sicherzustellen optimale Darstellung auf allen Geräten. Allerdings kann es bei Benutzern zu einem Problem kommen, bei dem alle Elemente, einschließlich des Logos und des Hamburger-Menüs, auf kleineren Bildschirmen verschwinden.
Der zugrunde liegende Grund für dieses Verschwinden hängt oft mit der Klasse „navbar-default“ zusammen, die auf die Navigationsleiste in angewendet wird frühere Versionen von Bootstrap. Obwohl es vielleicht nicht sofort ersichtlich ist, ist diese Klasse wichtig, um die Hintergrundfarbe festzulegen und das Hamburger-Symbol sichtbar zu machen.
Lösung 1: Bootstrap 5 und Modern Bootstrap
In Bootstrap 5 und modernen Versionen wurde die Klasse „navbar-default“ ersetzt. Damit das Hamburger-Symbol angezeigt wird, müssen Sie Ihrem Navbar-Element die Klasse „navbar-light“ oder „navbar-dark“ hinzufügen. Zum Beispiel:
<nav>
Lösung 2: Hinzufügen einer Hintergrundfarbe (Bootstrap 4 und früher)
Wenn Sie Bootstrap 4 oder früher verwenden, können Sie das Problem beheben Beheben Sie das Problem, indem Sie dem Navbar-Nav-Element eine Hintergrundfarbe hinzufügen:
#navbar-primary .navbar-nav {
background: #ededed;
}Lösung 3: Den Toggler abdunkeln (Bootstrap 4 und früher)
Eine weitere Option für Bootstrap 4 und früher besteht darin, das Toggler-Symbol abzudunkeln, indem die .icon-bar-Klasse geändert wird:
.navbar-toggle .icon-bar {
background-color: rgb(136, 136, 136);
}Zusätzlicher Hinweis für Bootstrap 3:
Für Bootstrap 3, die Klasse „navbar-default“, muss enthalten sein, damit die Menüelemente richtig ausgerichtet sind.
Durch die Implementierung einer dieser Lösungen können Sie sicherstellen, dass Ihre Bootstrap-Navigationsleiste auf allen Bildschirmgrößen wie vorgesehen angezeigt wird, unabhängig von das verwendete Gerät.
Das obige ist der detaillierte Inhalt vonBootstrap Navbar: Warum verschwinden mein Logo und meine Menüelemente auf kleineren Geräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
