Bootstrap – Navigationsleiste

Navigationsleiste im Standardstil

Die Navigationsleiste ist eine responsive Basiskomponente, die als Navigationskopfzeile in Ihrer App oder Website dient. Sie werden auf mobilen Geräten zusammengeklappt (und können geöffnet und geschlossen werden) und sich mit zunehmender Breite des Ansichtsfensters allmählich horizontal ausdehnen.

Ausgerichtete Navigationslinks in der Navigationsleiste sind veraltet.

Die in der Navigationsleiste enthaltenen Elemente laufen über

Da Bootstrap nicht weiß, wie groß der Platz sein muss, den Sie in der Navigationsleiste platzieren, kann es vorkommen, dass der Inhalt in der Navigationsleiste umbrochen wird (d. h. die Navigationsleiste belegt zwei Zeilen). Die Lösung lautet wie folgt:

1. Reduzieren Sie die Breite aller Elemente in der Navigationsleiste.
2. Verstecken Sie einige Elemente in der Navigationsleiste auf bestimmten Bildschirmgrößen (mithilfe der Responsive Utility-Klasse).
3. Ändern Sie den Wert für die minimale Bildschirmbreite, der die Konvertierung zwischen horizontaler Anordnung und zusammenklappbarer Anordnung der Navigationsleiste auslöst. Dies kann erreicht werden, indem Sie die Variable @grid-float-breakpoint ändern oder indem Sie den relevanten Medienabfragecode selbst neu schreiben, um den Standardwert von Bootstrap zu überschreiben.

   Abhängig von JavaScript

   Wenn JavaScript deaktiviert ist und das Ansichtsfenster so schmal ist, dass die Navigationsleiste ausgeblendet wird, wird die Navigationsleiste nicht geöffnet und der in .navbar-collapse enthaltene Inhalt ist nicht sichtbar.

   Ändern Sie den Schwellenwert des Ansichtsfensters und beeinflussen Sie dadurch den Anordnungsmodus der Navigationsleiste

   Wenn die Breite des Browser-Ansichtsfensters (Viewport) kleiner als der @grid-float-breakpoint-Wert ist, werden die Elemente in der Navigationsleiste gefaltet, d viewport (Ansichtsfenster) ist größer als @grid-float-breakpoint Wenn der Wert festgelegt ist, werden die Elemente in der Navigationsleiste horizontal angeordnet, was bedeutet, dass sie in einem Anzeigemodus für nicht mobile Geräte angezeigt werden. Durch Anpassen dieses Werts im Quellcode können Sie steuern, wann die Navigationsleisten gestapelt und horizontal angeordnet werden. Der Standardwert ist 768px (der Mindestwert für kleine Bildschirme – oder Tablets).