Bagaimana untuk Mencipta Bar Sisi Navbar Responsif 'Laci' dalam Bootstrap 5?

Buat "laci" bar sisi navbar responsif dalam Bootstrap?

Menggunakan Bootstrap 5 Beta 3 (kemas kini 2021)

Bootstrap kini menawarkan komponen Offcanvas, menjadikannya lebih mudah untuk dibuat sidebars.

Menggunakan Bootstrap 4 (jawapan asal)

Pertimbangan untuk Sidebars:

• Responsif
• Berbilang peringkat struktur
• Kebolehtogelan
• Kedudukan (tolak lwn tindanan, kiri atau kanan)
• Tingkah laku tetap atau melekit
• Gaya animasi

Menangani yang khusus keperluan:

1. Responsif:

• Kemas kini kelas lajur yang betul kepada col dan bukannya col-auto.

2. Navbar Scrolling:

• Alih keluar kelas sticky-top daripada navbar untuk mengelakkannya daripada melekat.

3. Butang Menu Melekit:

• Butang menu tidak boleh melekat, kerana ia tidak sejajar dengan bar sisi.

4. Pemalap Latar Belakang:

• Ini tidak diliputi dalam jawapan ini.

Contoh Bar Sisi dengan Ciri Dipertingkat:

Bar sisi contoh ini hampir sama dengan yang terdapat dalam pautan rujukan dan termasuk:

• Lebar tetap
• Autotutup pada skrin yang lebih kecil, membuka pada skrin yang lebih luas
• Boleh togol pada semua lebar
• Bar sisi tindanan responsif dihidupkan skrin yang lebih kecil

Tambahan CSS untuk versi penuh:

.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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Sisi Navbar Responsif 'Laci' dalam Bootstrap 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!