Bootstrap Navbar: Memaparkan Elemen pada Peranti Yang Lebih Kecil
Soalan ini menangani isu di mana bar navigasi Bootstrap dengan imej logo hilang pada skrin yang lebih kecil , menghalang paparan logo dan menu hamburger.
Penyelesaian terletak pada penggunaan kelas utiliti yang sesuai yang disediakan oleh Bootstrap untuk memastikan paparan yang betul merentas peranti.
Bootstrap 5:
Untuk Bootstrap 5, kemasukan kelas "navbar-light" atau "navbar-dark" adalah perlu untuk paparan ikon hamburger. Hanya tambah satu daripada kelas ini pada bar navigasi anda dan hamburger akan kelihatan.
Bootstrap 4 dan Terdahulu:
Jika anda menggunakan Bootstrap 4 atau yang lebih awal versi, anda boleh menggunakan salah satu daripada penyelesaian berikut:
Coretan Kod:
Warna Latar Belakang:
#navbar-primary .navbar-nav { background: #ededed; }
Togol Lebih Gelap:
.navbar-toggle .icon-bar { background-color: rgb(136, 136, 136); }
Kemas Kini Bootstrap 4.0.0:
Dalam Bootstrap 4.0.0, kelas "navbar-default" telah ditamatkan. Sebaliknya, gunakan "navbar-light bg-light" untuk navbar berwarna terang atau "navbar-dark bg-dark" untuk navbar berwarna gelap.
Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Logo Bootstrap Navbar dan Menu Hamburger pada Peranti yang Lebih Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!