Wie erstelle ich in Bootstrap 5 eine responsive Navigationsleisten-Seitenleiste „Drawer'?

Eine responsive Navbar-Seitenleisten-„Schublade“ in Bootstrap erstellen?

Verwenden von Bootstrap 5 Beta 3 (Update 2021)

Bootstrap bietet jetzt eine Offcanvas-Komponente, die das Erstellen von Seitenleisten erleichtert.

Verwenden von Bootstrap 4 (ursprüngliche Antwort)

Überlegungen zu Seitenleisten:

• Reaktionsfähigkeit
• Mehrstufige Struktur
• Umschaltbarkeit
• Positionierung (Push vs. Overlay, links oder rechts)
• Behoben oder klebriges Verhalten
• Animationsstil

Eingehen auf die spezifischen Anforderungen:

1. Reaktionsfähigkeit:

• Aktualisieren Sie die rechte Spaltenklasse auf col statt col-auto.

2. Scrollen in der Navigationsleiste:

• Entfernen Sie die Sticky-Top-Klasse aus der Navigationsleiste, um zu verhindern, dass sie hängen bleibt.

3. Klebrige Menüschaltfläche:

• Die Menüschaltfläche sollte nicht klebrig sein, da sie nicht an der Seitenleiste ausgerichtet ist.

4. Hintergrunddimmer:

• Dies wird in dieser Antwort nicht behandelt.

Beispiel für eine Seitenleiste mit erweiterten Funktionen:

Diese Beispielseitenleiste ähnelt stark der im Referenzlink und umfasst:

• Feste Breite
• Automatisches Schließen auf kleineren Bildschirmen, Öffnen auf breiteren Bildschirmen
• Einschaltbar alle Breiten
• Responsive Overlay-Seitenleiste auf kleineren Bildschirmen

Zusätzliches CSS für Vollversion:

.w-sidebar {
    width: 200px;
    max-width: 200px;
}

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}

Demo: https://codeply.com/go/w1AMD1EY3c

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