Wie kann ich in Bootstrap 4 eine responsive Navigationsleisten-Seitenleiste erstellen?

Verwenden Sie die integrierte Offcanvas-Komponente für Bootstrap 5

Bootstrap 5 Beta 3 führte eine neue Offcanvas-Komponente ein. Mit dieser Komponente können Sie ganz einfach Seitenleisten erstellen.

Sie können sich ein Beispiel für die Verwendung dieser Komponente auf der Bootstrap-Website ansehen.

Erstellen einer responsiven Navigationsleisten-Seitenleistenschublade in Bootstrap 4

Um eine responsive Navigationsleisten-Seitenleiste in Bootstrap 4 zu erstellen, können Sie eine Kombination aus Kollaps, gestapelten Pillen und Flexbox verwenden.

Beginnen Sie mit der Erstellung eines Container-Divs mit einer Container-Fluid-Klasse und einer Höhe von 100 Vh.

<div class="container-fluid h-100">
  ...
</div>

Erstellen Sie innerhalb des Container-Div zwei Zeilen. Die erste Zeile enthält die Seitenleiste und die zweite Zeile den Hauptinhalt.

<div class="row h-100">
  <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark">

Der Seitenleiste sollte eine Klasse zum Reduzieren zugewiesen werden, um sie standardmäßig auszublenden. Sie können eine Schaltfläche hinzufügen, um die Sichtbarkeit der Seitenleiste umzuschalten.

<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
  Menu
</button>  

Verwenden Sie für den Hauptinhalt eine Col-Klasse, um den Rest des verfügbaren Platzes auszufüllen.

<div class="col">
  ...
</div>

Um das zu erstellen Sidebar Sticky, fügen Sie die Sticky-Top-Klasse zur Navigationsleiste der Sidebar hinzu.

<ul class="nav flex-column navbar-dark sticky-top">
  ...
</ul>

Fügen Sie abschließend etwas CSS hinzu, um die Sidebar zu formatieren und responsiv zu machen.

@media (min-width: 768px) {
  #collapseExample {
    width: 250px;
  }
}

Dadurch wird die Seitenleiste 250 Pixel breit auf Bildschirmen, die breiter als 768 Pixel sind.

Das obige ist der detaillierte Inhalt vonWie kann ich in Bootstrap 4 eine responsive Navigationsleisten-Seitenleiste erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!