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

Barbara Streisand
Lepaskan: 2024-11-06 00:02:02
asal
440 orang telah melayarinya

How to Display Bootstrap Navbar Logo and Hamburger Menu on  Smaller Devices?

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;
}
Salin selepas log masuk

Togol Lebih Gelap:

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

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!