Bagaimana untuk Menghalang Bootstrap 3 Navbar daripada Runtuh?

Cara Mencegah Navbar Runtuh dalam Bootstrap 3

Pengenalan

Menu navbar Bootstrap 3 menyediakan cara mudah untuk meruntuhkan dan mengembangkan item menu pada skrin yang lebih kecil. Walau bagaimanapun, dalam beberapa kes, anda mungkin mahu melumpuhkan gelagat runtuh ini dan memastikan menu kelihatan pada setiap masa. Artikel ini menawarkan penyelesaian kepada masalah ini.

Penyelesaian

Untuk mengelakkan bar navigasi daripada runtuh, anda boleh mengatasi gaya lalai Bootstrap. Berikut ialah sifat CSS yang perlu anda kemas kini:

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

Penjelasan

• .navbar-collapse.collapse: Sifat ini mengatasi keadaan tersembunyi lalai item menu sebelah kanan pada skrin yang lebih kecil, memastikan ia kekal kelihatan.
• .navbar-nav>li, .navbar-nav: Sifat ini memastikan bahawa kedua-dua item menu sebelah kiri dan sebelah kanan terapung ke kiri, membenarkan item itu muncul pada baris yang sama.
• .navbar-nav.navbar-right:last-child: Sifat ini membetulkan isu jidar yang boleh timbul dalam peleraian tertentu.
• .navbar-kanan: Sifat ini memastikan menu sebelah kanan dijajarkan ke sebelah kanan skrin.

Contoh

Menggabungkan perubahan CSS ini ke dalam projek anda akan melumpuhkan gelagat runtuh bar navigasi:

<link rel="stylesheet" href="css/custom-styles.css">

/* Custom Navbar Styles */
.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 melaksanakan pengubahsuaian CSS ini, anda boleh dengan mudah menghalang navbar runtuh dalam Bootstrap 3, memastikan menu anda kelihatan pada semua resolusi skrin.

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