Wie verhindert man den Zusammenbruch der Navbar in Bootstrap 3?

Verhindern des Zusammenklappens der Navigationsleiste in Bootstrap 3

In Bootstrap 3 kann die Navigationsleiste auf kleineren Bildschirmen minimiert werden, um Platz zu sparen. Dies kann in vielen Fällen nützlich sein, aber wenn Sie dieses Verhalten deaktivieren und Ihre Navigationsleiste jederzeit sichtbar halten möchten, gehen Sie wie folgt vor.

Anpassen des CSS

An Um das Zusammenklappen der Navigationsleiste zu verhindern, müssen Sie einige Standard-CSS-Eigenschaften überschreiben. Hier ist eine Aufschlüsselung der notwendigen Änderungen:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

• .navbar-collapse.collapse überschreibt die Standardeigenschaft display, die die reduzierten Elemente verbirgt. Stattdessen wird die Anzeige auf blockieren gesetzt, wodurch sie sichtbar werden.
• .navbar-nav>li, .navbar-nav zwingt die Menüelemente auf der linken Seite dazu schweben left.
• .navbar-nav.navbar-right:last-child gibt dem Menüelement ganz rechts einige subtile Randanpassungen.
• .navbar-right stellt sicher, dass das Menü auf der rechten Seite zum schwebt richtig.

Implementierung

Um diese Änderungen zu implementieren, fügen Sie das bereitgestellte CSS zu Ihrem Stylesheet hinzu. Alternativ können Sie die Stile direkt in Ihren HTML-Code integrieren.

Erklärung

Diese CSS-Eigenschaften arbeiten zusammen, um die Navigationsleistenelemente auf allen Bildschirmgrößen sichtbar zu halten.

• Die Eigenschaft .navbar-collapse.collapse überschreibt die Reduzierung Funktionalität.
• .navbar-nav>li, .navbar-nav und .navbar-right stellen sicher, dass das Menü auf der rechten Seite korrekt mit der linken Seite übereinstimmt Menü.

Das obige ist der detaillierte Inhalt vonWie verhindert man den Zusammenbruch der Navbar in Bootstrap 3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!