Wie kann ich den Bootstrap Navbar Collapse Breakpoint überschreiben?

Überschreiben des Kollaps-Haltepunkts der Bootstrap-Navigationsleiste

Bestimmte Szenarien erfordern eine Änderung des standardmäßigen Kollaps-Haltepunkts der Navigationsleiste von Bootstrap, der auf 768 Pixel eingestellt ist. In diesem Leitfaden werden alternative Methoden zur Änderung dieses Verhaltens untersucht, ohne auf LESS zurückzugreifen.

Bootstrap 5 (Update 2023)

Bootstrap 5 führt einen vereinfachten Ansatz ein. Fügen Sie einfach die Klasse .navbar-expand zur Navigationsleiste hinzu, um eine feste (niemals zusammenklappbare) Navigationsleiste zu erhalten. Für eine dauerhaft ausgeblendete Navigationsleiste lassen Sie die Klasse ganz weg.

Bootstrap 4 (Update 2018)

Bootstrap 4 verbessert die Navigationsleisten-Haltepunktsteuerung durch die Einführung von .navbar-expand- * Klassen:

• .navbar-expand-sm: Mobiles Menü bei Bildschirmbreiten von weniger als 576 Pixel
• .navbar-expand-md: Mobiles Menü bei Bildschirmbreiten von weniger als 768 Pixel
• .navbar-expand-lg: Mobiles Menü bei Bildschirmbreiten von weniger als 992 Pixel
• .navbar-expand-xl: Mobiles Menü bei Bildschirmbreiten kleiner als 1200px
• .navbar-expand: Navigationsleiste korrigiert, wird nie minimiert
• (Keine Erweiterungsklasse): Mobiles Menü immer anzeigen

Alternativ können Sie einen benutzerdefinierten Haltepunkt definieren :

@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    ...
  }
}

Bootstrap 3

Für Bootstrap 3.3.x können Sie den Haltepunkt mit dem folgenden CSS überschreiben:

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}

Das obige ist der detaillierte Inhalt vonWie kann ich den Bootstrap Navbar Collapse Breakpoint überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!