Bootstrap Navbar: Mengapa Logo dan Item Menu Saya Hilang pada Peranti yang Lebih Kecil?

Bootstrap Navbar: Menangani Elemen Yang Hilang pada Peranti Yang Lebih Kecil

Apabila mereka bentuk navbar Bootstrap dengan logo pusat dan item menu, adalah penting untuk memastikan paparan optimum merentas peranti. Walau bagaimanapun, pengguna mungkin menghadapi isu di mana semua elemen, termasuk logo dan menu hamburger, lenyap pada skrin yang lebih kecil.

Sebab asas untuk tindakan hilang ini selalunya berkaitan dengan kelas lalai navbar yang digunakan pada navbar dalam versi terdahulu Bootstrap. Walaupun ia mungkin tidak kelihatan serta-merta, kelas ini penting untuk menetapkan warna latar belakang dan menjadikan ikon hamburger kelihatan.

Penyelesaian 1: Bootstrap 5 dan Modern Bootstrap

Dalam Bootstrap 5 dan versi moden, kelas lalai navbar telah diganti. Untuk menjadikan ikon hamburger muncul, anda perlu menambah kelas navbar-light atau navbar-dark pada elemen navbar anda. Contohnya:

<nav>

Penyelesaian 2: Menambah Warna Latar Belakang (Bootstrap 4 dan Terdahulu)

Jika anda menggunakan Bootstrap 4 atau lebih awal, anda boleh menyelesaikan isu dengan menambahkan warna latar belakang pada elemen navbar-nav:

#navbar-primary .navbar-nav {
   background: #ededed;
}

Penyelesaian 3: Menggelapkan Toggler (Bootstrap 4 dan Terdahulu)

Pilihan lain untuk Bootstrap 4 dan lebih awal adalah untuk menggelapkan ikon toggler dengan mengubah suai kelas .icon-bar:

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

Nota Tambahan untuk Bootstrap 3:

Untuk Bootstrap 3, kelas lalai navbar mesti disertakan untuk item menu diselaraskan dengan betul.

Dengan melaksanakan salah satu daripada penyelesaian ini, anda boleh memastikan bahawa bar navbar Bootstrap anda dipaparkan seperti yang dimaksudkan pada semua saiz skrin, tanpa mengira peranti sedang digunakan.

Atas ialah kandungan terperinci Bootstrap Navbar: Mengapa Logo dan Item Menu Saya Hilang pada Peranti yang Lebih Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!