Wie kann ich den Bootstrap Navbar Collapse Breakpoint ändern, ohne LESS zu verwenden?

So passen Sie den Bootstrap-Navbar-Collapse-Haltepunkt ohne LESS an

Die Bootstrap 3-Navbar wird standardmäßig minimiert, wenn die Browserbreite unter 768 Pixel fällt. Dieser Haltepunkt kann mithilfe von CSS-Überschreibungen an einen benutzerdefinierten Wert angepasst werden. So geht's, ohne auf LESS zurückzugreifen:

Bootstrap 5 (Update 2023)

• Für eine Navigationsleiste, die nie zusammenbricht, fügen Sie .navbar-expand hinzu Klasse.
• Für eine Navigationsleiste, die immer ausgeblendet wird, nicht verwenden .navbar-expand.

Bootstrap 4 (Update 2018)

• Verwenden Sie die Klassen .navbar-expand-*, um die anzugeben gewünschter Haltepunkt.

  • .navbar-expand-sm: Reduziert unter 576px
  • .navbar-expand-md: Reduziert unter 768px
  • .navbar-expand-lg: Reduziert unter 992px
  • .navbar-expand-xl: Reduziert unter 768px 1200px
  • .navbar-expand: Nie kollabieren
  • (Keine Erweiterungsklasse): Immer kollabieren
• Für benutzerdefinierte Haltepunkte verwenden Sie CSS:

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

Bootstrap 3 (vor 2018)

• Überschreiben Sie den Standardhaltepunkt wie folgt CSS:

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

• Ersetzen Sie „991px“ durch Ihren gewünschten Haltepunkt.

Hinweise:

• Die oben genannten Methoden überschreiben das Standardverhalten für alle Seiten.
• Sie können gerätespezifische Medienabfragen verwenden um verschiedene Haltepunkte auf verschiedenen Geräten anzusprechen.
• Denken Sie daran, Ihre Änderungen gründlich zu testen, um sicherzustellen, dass sie keine anderen Aspekte Ihrer Website beeinträchtigen.

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