Bagaimana Saya Boleh Menghalang Bootstrap 3 Navbar Runtuh?

Melumpuhkan Navbar Collapse dalam Bootstrap 3

Komponen navbar Bootstrap menyediakan sistem navigasi yang mudah dan responsif. Secara lalai, bar navigasi runtuh pada saiz skrin yang lebih kecil untuk meningkatkan kebolehcapaian mudah alih. Walau bagaimanapun, dalam beberapa kes, anda mungkin mahu melumpuhkan gelagat runtuh ini untuk memastikan bar nav anda kekal kelihatan pada setiap masa.

Satu pendekatan untuk mencapai ini ialah dengan mengatasi gaya CSS lalai yang bertanggungjawab untuk meruntuhkan bar navigasi. Berikut ialah sifat khusus yang perlu ditangani:

.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;
}

Dengan mengatasi sifat ini, anda boleh menghalang navbar daripada runtuh pada skrin yang lebih kecil.

Penjelasan:

• .navbar-collapse.collapse: Sifat ini menyasarkan keadaan runtuh navbar dan menetapkan paparannya untuk menyekat untuk memastikan ia kelihatan.
• .navbar-nav>li, .navbar-nav: Sifat ini memastikan kedua-dua item menu sebelah kiri dan kanan (termasuk butang togol) sentiasa dipaparkan sebaris.
• .navbar-nav.navbar-right:last-child: Sifat ini membetulkan isu jarak kecil dengan elemen terakhir dalam menu sebelah kanan pada skrin bersaiz tablet.
• .navbar-kanan: Sifat ini meletakkan menu sebelah kanan dengan betul pada skrin yang lebih kecil dengan menetapkan apungannya ke kanan.

Dengan melaksanakan penggantian CSS ini, anda boleh berjaya melumpuhkan gelagat runtuh navbar dalam Bootstrap 3. Teknik ini membolehkan anda mengekalkan paparan yang boleh dilihat bar nav merentasi semua saiz port pandangan tanpa memerlukan peraturan CSS yang kompleks atau berlebihan.

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