Bagaimana untuk Mencegah Navbar Runtuh dalam Bootstrap 3?

Mencegah Navbar Runtuh dalam Bootstrap 3

Dalam Bootstrap 3, navbar boleh runtuh pada skrin yang lebih kecil untuk menjimatkan ruang. Ini boleh berguna dalam banyak kes, tetapi jika anda ingin melumpuhkan kelakuan ini dan memastikan bar navigasi anda kelihatan pada setiap masa, begini caranya.

Menyesuaikan CSS

Untuk mengelakkan navbar runtuh, anda perlu mengatasi beberapa sifat CSS lalai. Berikut ialah pecahan perubahan yang diperlukan:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

• .navbar-collapse.collapse mengatasi sifat lalai paparan, yang menyembunyikan elemen yang runtuh. Sebaliknya, ia menetapkan paparan kepada sekat, menjadikannya kelihatan.
• .navbar-nav>li, .navbar-nav memaksa item menu sebelah kiri untuk terapung ke kiri.
• .navbar-nav.navbar-right:last-child memberikan item menu paling kanan beberapa pelarasan jidar halus.
• .navbar-right memastikan menu sebelah kanan terapung ke kanan.

Pelaksanaan

Untuk melaksanakan perubahan ini, tambahkan CSS yang disediakan pada lembaran gaya anda. Sebagai alternatif, anda boleh menyelaraskan gaya terus ke dalam kod HTML anda.

Penjelasan

Sifat CSS ini berfungsi bersama untuk memastikan elemen bar navigasi kelihatan merentas semua saiz skrin.

• Harta .navbar-collapse.collapse mengatasi kefungsian runtuh.
• .navbar-nav>li, .navbar-nav dan .navbar-kanan pastikan menu sebelah kanan diselaraskan dengan betul dengan menu sebelah kiri.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Navbar Runtuh dalam Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!