Bagaimana untuk Mengubah Titik Putus Navbar Bootstrap?

Cara Menyesuaikan Titik Putus Navbar Bootstrap Menggunakan Stylus

Satu permintaan penyesuaian biasa untuk navbar Bootstrap ialah menukar titik putus di mana navbar runtuh. Walaupun Bootstrap 3 memerlukan penyuntingan pembolehubah KURANG, ini boleh dicapai dalam Stylus dengan beberapa CSS tambahan.

Bootstrap 5

Setakat Bootstrap 5, menguruskan titik putus keruntuhan bar navigasi telah menjadi lebih mudah. Secara lalai, bar navigasi akan runtuh di bawah 992px. Anda boleh menyesuaikan ini dengan menambah kelas .navbar-expand-*, dengan * mewakili titik putus yang anda mahu gunakan:

• .navbar-expand-sm: Menu mudah alih di bawah 576px
• .navbar-expand-md: Menu mudah alih di bawah 768px
• .navbar-expand-lg: Menu mudah alih di bawah 992px
• .navbar-expand-xl: Menu mudah alih di bawah 1200px
• .navbar-expand: Navbar sentiasa dikembangkan
• (Tiada kelas kembangkan): Navbar sentiasa runtuh

Bootstrap 4

Dalam Bootstrap 4, anda boleh menggunakan kelas .navbar-expand-* yang sama seperti dalam Bootstrap 5. Selain itu, anda boleh mencipta titik putus tersuai menggunakan CSS tersuai:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    // Custom CSS rules for navbar expansion
  }
}

Bootstrap 3

Untuk Bootstrap 3, berikut ialah CSS yang berfungsi:

@media (max-width: 991px) {
  // CSS rules to override the default collapse breakpoint
}

Ganti 991px dengan titik putus yang anda inginkan. Ini akan meruntuhkan bar navigasi di bawah lebar piksel yang ditentukan.

Nota untuk Titik Putus Bawah 768px

Jika anda perlu menetapkan titik putus di bawah 768px, sedikit pelarasan pada CSS di atas adalah perlu. Rujuk pautan yang disediakan untuk penjelasan terperinci.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Titik Putus Navbar Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!