Bagaimana untuk Melumpuhkan Navbar Collapse dalam Bootstrap 3 tanpa Overrides CSS Berlebihan?

Bootstrap 3 - Menavigasi Navbar tanpa Runtuh

Dalam Bootstrap 3, navbar runtuh secara lalai pada saiz skrin yang lebih kecil, memberikan pengguna- antara muka mesra. Walau bagaimanapun, sesetengah senario mungkin memerlukan bar navigasi statik pada setiap masa. Artikel ini akan membimbing anda melumpuhkan keruntuhan bar navigasi tanpa menggunakan penggantian CSS yang meluas.

Memahami Mekanisme Runtuh

Keruntuhan bar navigasi Bootstrap dikawal oleh .navbar-collapse kelas. Secara lalai, kelas ini menyembunyikan bahagian kanan menu untuk peranti di bawah titik putus tertentu. Sebaliknya, butang togol muncul, membenarkan pengguna mendedahkan atau menyembunyikan menu.

Melumpuhkan Runtuh dengan Mudah

Untuk melumpuhkan keruntuhan bar navigasi, kita perlu mengatasi gaya lalai digunakan oleh Bootstrap. Berikut ialah sifat CSS yang penting untuk dilaraskan:

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

Pecahan Penggantian

1. .navbar-collapse.collapse { paparan: block!important; }: Override ini memastikan kandungan navbar kekal dipaparkan walaupun kelas .collapse digunakan.
2. .navbar-nav>li, .navbar-nav { float: left !important; }: Untuk menjajarkan menu sebelah kanan dengan menu sebelah kiri, kita perlu mengapungkan item sebelah kiri.
3. .navbar-nav.navbar-right:last-child { margin-right: -15px !penting; }: Sifat ini adalah pilihan dan hanya digunakan pada saiz skrin tertentu. Anda boleh meninggalkannya jika ia tidak menjejaskan reka letak navbar anda.
4. .navbar-right { float: right!important; }: Ini memastikan menu sebelah kanan menjajar ke kanan, manakala elemen dalamannya mengikut sifat terapung kiri.

Kesimpulan

Dengan menggunakan penggantian CSS ini, anda boleh melumpuhkan keruntuhan bar nav dengan berkesan dalam Bootstrap 3. Ini membolehkan anda mengekalkan bar navigasi statik tanpa mengira peranti atau saiz skrin, memberikan pengalaman pengguna yang disesuaikan untuk aplikasi anda.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Navbar Collapse dalam Bootstrap 3 tanpa Overrides CSS Berlebihan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!