Wie deaktiviere ich das Zusammenklappen der Navbar in Bootstrap 3 ohne übermäßige CSS-Überschreibungen?

Bootstrap 3 – Navigieren in der Navigationsleiste ohne Ausblenden

In Bootstrap 3 wird die Navigationsleiste auf kleineren Bildschirmgrößen standardmäßig ausgeblendet, um dem Benutzer eine benutzerfreundliche Oberfläche. In einigen Szenarien ist jedoch möglicherweise jederzeit eine statische Navigationsleiste erforderlich. Dieser Artikel führt Sie durch die Deaktivierung der Navigationsleisten-Reduzierung, ohne auf umfangreiche CSS-Überschreibungen zurückgreifen zu müssen.

Den Reduzierungsmechanismus verstehen

Die Navigationsleisten-Reduzierung von Bootstrap wird durch die .navbar-collapse gesteuert Klasse. Standardmäßig verbirgt diese Klasse den rechten Teil des Menüs für Geräte unterhalb bestimmter Haltepunkte. Stattdessen wird eine Umschalttaste angezeigt, mit der Benutzer das Menü ein- oder ausblenden können.

Einklappen mit Leichtigkeit deaktivieren

Um das Einklappen der Navigationsleiste zu deaktivieren, müssen wir die Standardstile überschreiben angewendet von Bootstrap. Hier sind die wesentlichen CSS-Eigenschaften, die angepasst werden müssen:

.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;
}

Aufschlüsselung der Overrides

1. .navbar-collapse.collapse { display: block!important; }: Diese Überschreibung stellt sicher, dass der Inhalt der Navigationsleiste auch dann angezeigt bleibt, wenn die Klasse .collapse angewendet wird.
2. .navbar-nav>li, .navbar-nav { float: left !important; }: Damit das rechte Menü mit dem linken übereinstimmt, müssen wir die Elemente auf der linken Seite schweben lassen.
3. .navbar-nav.navbar-right:last-child { margin-right: -15px !important; }: Diese Eigenschaft ist optional und gilt nur für bestimmte Bildschirmgrößen. Sie können es weglassen, wenn es sich nicht auf das Layout Ihrer Navigationsleiste auswirkt.
4. .navbar-right { float: right!important; }: Dadurch wird sichergestellt, dass das rechte Menü rechts ausgerichtet ist, während seine inneren Elemente der linksschwebenden Eigenschaft folgen.

Fazit

Durch Anwenden Mit diesen CSS-Überschreibungen können Sie die Navigationsleistenreduzierung in Bootstrap 3 effektiv deaktivieren. Dadurch können Sie unabhängig vom Gerät oder der Bildschirmgröße eine statische Navigationsleiste beibehalten und so ein maßgeschneidertes Benutzererlebnis bieten Ihre Bewerbung.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich das Zusammenklappen der Navbar in Bootstrap 3 ohne übermäßige CSS-Überschreibungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!