Wie kann ich verhindern, dass die Bootstrap 3 Navbar zusammenbricht?

Navbar Collapse in Bootstrap 3 deaktivieren

Die Navbar-Komponente von Bootstrap bietet ein praktisches und reaktionsschnelles Navigationssystem. Standardmäßig wird die Navigationsleiste auf kleineren Bildschirmgrößen ausgeblendet, um die mobile Zugänglichkeit zu verbessern. In manchen Fällen möchten Sie dieses Einblendverhalten jedoch möglicherweise deaktivieren, um sicherzustellen, dass Ihre Navigationsleiste jederzeit sichtbar bleibt.

Ein Ansatz, dies zu erreichen, besteht darin, die Standard-CSS-Stile zu überschreiben, die für das Einklappen der Navigationsleiste verantwortlich sind. Hier sind die spezifischen Eigenschaften, die berücksichtigt 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;
}

Durch Überschreiben dieser Eigenschaften können Sie verhindern, dass die Navigationsleiste auf kleineren Bildschirmen ausgeblendet wird.

Erklärung:

• .navbar-collapse.collapse: Diese Eigenschaft zielt auf den minimierten Zustand der Navigationsleiste ab und setzt deren Anzeige auf „Blockieren“, damit sie sichtbar bleibt.
• .navbar-nav>li, . navbar-nav: Diese Eigenschaften stellen sicher, dass sowohl die linken als auch die rechten Menüelemente (einschließlich der Umschalttaste) immer inline angezeigt werden.
• .navbar-nav.navbar-right:last-child: Diese Eigenschaft korrigiert Ein kleines Problem mit dem Abstand beim letzten Element im Menü auf der rechten Seite auf Bildschirmen in Tablet-Größe.
• .navbar-right: Diese Eigenschaft positioniert das Menü auf der rechten Seite auf kleineren Bildschirmen korrekt, indem sie den Float auf rechts setzt.

Durch die Implementierung dieser CSS-Überschreibungen können Sie das Verhalten zum Reduzieren der Navigationsleiste in Bootstrap 3 erfolgreich deaktivieren. Mit dieser Technik können Sie eine sichtbare Navigationsleiste über alle Ansichtsfenstergrößen hinweg beibehalten, ohne dass komplexe oder übermäßige CSS-Regeln erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass die Bootstrap 3 Navbar zusammenbricht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!