Bagaimana untuk Memaparkan Logo Bootstrap Navbar dan Menu Hamburger pada Peranti yang Lebih Kecil?

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:

• Tambah warna latar belakang: Berikan warna latar belakang pada bar navigasi untuk menjadikannya kelihatan walaupun tanpa warna latar belakang yang ditentukan harta benda.
• Gelapkan togol: Ubah suai warna latar belakang bar ikon togol untuk memberikan kontras yang lebih baik dan menjadikannya lebih ketara.

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!