Wie kann verhindert werden, dass die Bootstrap 3-Navigationsleiste zusammenbricht?

So verhindern Sie das Zusammenbrechen der Navigationsleiste in Bootstrap 3

Einführung

Das Navigationsleistenmenü von Bootstrap 3 bietet eine bequeme Möglichkeit, die Menüelemente auf kleineren Bildschirmen zu reduzieren und zu erweitern. In manchen Fällen möchten Sie dieses Einblendverhalten jedoch möglicherweise deaktivieren und das Menü jederzeit sichtbar lassen. Dieser Artikel bietet eine Lösung für dieses Problem.

Lösung

Um zu verhindern, dass die Navigationsleiste zusammenbricht, können Sie die Standardstile von Bootstrap überschreiben. Hier sind die CSS-Eigenschaften, die Sie aktualisieren 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;
}

Erläuterung

• .navbar-collapse.collapse: Diese Eigenschaft überschreibt den standardmäßigen ausgeblendeten Status der Menüelemente auf der rechten Seite auf kleineren Bildschirmen und stellt sicher, dass sie sichtbar bleiben.
• .navbar-nav>li, .navbar-nav: Diese Eigenschaften stellen dies sicher Sowohl die linken als auch die rechten Menüelemente schweben nach links, sodass sie in derselben Zeile angezeigt werden können.
• .navbar-nav.navbar-right:last-child: Diese Eigenschaft behebt ein Randproblem, das bei bestimmten Auflösungen auftreten kann.
• .navbar-right: Diese Eigenschaft hält das Menü auf der rechten Seite am rechten Bildschirmrand ausgerichtet.

Beispiel

Durch die Einbindung dieser CSS-Änderungen in Ihr Projekt wird das Einblendverhalten der Navigationsleiste deaktiviert:

<link rel="stylesheet" href="css/custom-styles.css">

/* Custom Navbar Styles */
.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 die Implementierung dieser CSS-Änderungen können Sie dies tun Verhindern Sie mühelos, dass die Navigationsleiste in Bootstrap 3 zusammenbricht, sodass Ihr Menü auf allen Bildschirmauflösungen sichtbar bleibt.

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