Wie ändere ich den Bootstrap Navbar Collapse Breakpoint?

So passen Sie den Haltepunkt zum Zusammenklappen der Bootstrap-Navigationsleiste mit dem Stift an

Eine häufige Anpassungsanfrage für Bootstrap-Navigationsleisten besteht darin, den Haltepunkt zu ändern, an dem die Navigationsleiste ausgeblendet wird. Während Bootstrap 3 die Bearbeitung der LESS-Variablen erfordert, kann dies in Stylus mit etwas zusätzlichem CSS erreicht werden.

Bootstrap 5

Ab Bootstrap 5 wird der Haltepunkt zum Zusammenklappen der Navigationsleiste verwaltet ist einfacher geworden. Standardmäßig wird die Navigationsleiste unter 992 Pixel ausgeblendet. Sie können dies anpassen, indem Sie die Klasse .navbar-expand-* hinzufügen, wobei * den Haltepunkt darstellt, den Sie verwenden möchten:

• .navbar-expand-sm: Mobiles Menü unter 576px
• .navbar-expand-md: Mobiles Menü unter 768px
• .navbar-expand-lg: Mobile Menü unter 992 Pixel
• .navbar-expand-xl: Mobiles Menü unter 1200 Pixel
• .navbar-expand: Navbar immer erweitert
• (Keine Erweiterungsklasse): Navbar immer minimiert

Bootstrap 4

In Bootstrap 4 können Sie dieselben .navbar-expand-*-Klassen wie in Bootstrap 5 verwenden. Darüber hinaus können Sie benutzerdefinierte Haltepunkte mit benutzerdefiniertem CSS erstellen:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    // Custom CSS rules for navbar expansion
  }
}

Bootstrap 3

Für Bootstrap 3 ist hier die Funktionsweise CSS:

@media (max-width: 991px) {
  // CSS rules to override the default collapse breakpoint
}

Ersetzen Sie 991px durch Ihren gewünschten Haltepunkt. Dadurch wird die Navigationsleiste unter die angegebene Pixelbreite ausgeblendet.

Hinweis für Haltepunkte unter 768 Pixel

Wenn Sie einen Haltepunkt unter 768 Pixel festlegen müssen, sind geringfügige Anpassungen am oben genannten CSS erforderlich sind notwendig. Ausführliche Erläuterungen finden Sie unter den bereitgestellten Links.

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