Bagaimanakah Saya Boleh Menyesuaikan Titik Putus Runtuh Navbar Bootstrap?

Menyesuaikan Titik Putus Navbar Bootstrap

Apabila menggunakan Bootstrap, titik putus lalai untuk runtuhan bar nav ditetapkan kepada 768px. Walaupun ini mungkin sesuai untuk kebanyakan kes, terdapat keadaan di mana anda mungkin ingin menukar titik putus ini agar lebih sesuai dengan keperluan khusus anda. Artikel ini akan membimbing anda melalui pelbagai kaedah untuk mencapai perkara ini tanpa menggunakan KURANG.

Bootstrap 5 dan Ke Atas

Dalam Bootstrap versi 5 dan lebih baru, meruntuhkan bar navigasi dikendalikan melalui kelas "navbar-expand-*". Berikut ialah pecahan:

• .navbar-expand: Tiada runtuh
• .navbar-expand-sm: Runtuhkan pada skrin yang lebih kecil daripada 576px
• .navbar-expand- md: Runtuhkan pada skrin yang lebih kecil daripada 768px
• .navbar-expand-lg: Runtuhkan pada skrin yang lebih kecil daripada 992px
• .navbar-expand-xl: Runtuhkan pada skrin yang lebih kecil daripada 1200px

Bootstrap 4

Begitu juga dalam Bootstrap 4, anda boleh menggunakan kelas navbar-expand-*:

• .navbar-expand-sm: Runtuhkan pada skrin yang lebih kecil daripada 576px
• .navbar-expand-md: Runtuhkan pada skrin yang lebih kecil daripada 768px
• .navbar-expand-lg: Runtuhkan pada skrin yang lebih kecil daripada 992px
• .navbar-expand-xl: Runtuhkan pada skrin yang lebih kecil daripada 1200px

Walau bagaimanapun, jika anda memerlukan titik putus tersuai, anda boleh menggunakan perkara berikut CSS:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    /* Customize navbar behavior at your specific breakpoint */
  }
}

Bootstrap 3 (3.3.x)

Untuk Bootstrap 3.3.x, anda boleh mengatasi titik putus navbar dengan CSS tersuai:

@media (max-width: 991px) {
  /* Override navbar collapsing point at 991px */
  /* Adjust collapse point as needed */
}

Nota: CSS tersuai yang disediakan di sini sesuai untuk tetapan titik putus lebih besar daripada 768px. Untuk titik putus yang lebih kecil daripada 768px, rujuk contoh yang disediakan dalam soalan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Titik Putus Runtuh Navbar Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!