Bagaimanakah saya boleh mencipta laci bar sisi navbar responsif dalam Bootstrap 4?

Gunakan komponen Offcanvas terbina dalam untuk Bootstrap 5

Bootstrap 5 Beta 3 memperkenalkan komponen Offcanvas baharu. Komponen ini menjadikannya mudah untuk membuat bar sisi.

Anda boleh melihat contoh komponen ini yang digunakan di tapak web Bootstrap.

Mencipta laci bar sisi bar nav responsif dalam Bootstrap 4

Untuk mencipta laci bar sisi bar nav responsif dalam Bootstrap 4, anda boleh menggunakan gabungan runtuh, pil bertindan dan flexbox.

Mulakan dengan mencipta div bekas dengan kelas cecair bekas dan ketinggian 100vh.

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

Di dalam div bekas, buat dua baris. Baris pertama akan mengandungi bar sisi dan baris kedua akan mengandungi kandungan utama.

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

Bar sisi harus diberi kelas runtuh untuk menyembunyikannya secara lalai. Anda boleh menambah butang untuk menogol keterlihatan bar sisi.

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

Untuk kandungan utama, gunakan kelas kol untuk mengisi seluruh ruang yang tersedia.

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

Untuk membuat sidebar sticky, tambahkan kelas sticky-top pada navbar sidebar.

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

Akhir sekali, tambahkan beberapa CSS untuk menggayakan sidebar dan jadikan ia responsif.

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

Ini akan menjadikan bar sisi 250px lebar pada skrin lebih lebar daripada 768px.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta laci bar sisi navbar responsif dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!