Bagaimanakah Saya Boleh Mengatasi Titik Putus Runtuh Navbar Bootstrap?

Mengatasi Titik Putus Navbar Bootstrap

Senario tertentu memerlukan pengubahsuaian titik putus runtuh lalai bagi bar navigasi Bootstrap, ditetapkan kepada 768px. Panduan ini menyiasat kaedah alternatif untuk mengubah tingkah laku ini tanpa menggunakan KURANG.

Bootstrap 5 (Kemas Kini 2023)

Bootstrap 5 memperkenalkan pendekatan yang dipermudahkan. Cuma tambah kelas .navbar-expand pada navbar untuk bar navigasi tetap (tidak pernah runtuh). Untuk bar navigasi yang runtuh secara kekal, tinggalkan kelas itu sama sekali.

Bootstrap 4 (Kemas Kini 2018)

Bootstrap 4 meningkatkan kawalan titik putus navbar dengan pengenalan .navbar-expand- * kelas:

• .navbar-expand-sm: Menu mudah alih pada lebar skrin kurang daripada 576px
• .navbar-expand-md: Menu mudah alih pada lebar skrin kurang daripada 768px
• .navbar-expand-lg: Menu mudah alih pada lebar skrin kurang daripada 992px
• .navbar-expand-xl: Menu mudah alih pada lebar skrin kurang daripada 1200px
• .navbar-expand: Navbar tetap, tidak pernah runtuh
• (Tiada kelas kembangkan): Sentiasa paparkan menu mudah alih

Sebagai alternatif, anda boleh menentukan titik putus tersuai:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    ...
  }
}

Bootstrap 3

Untuk Bootstrap 3.3.x, anda boleh mengatasi titik putus menggunakan CSS berikut:

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}

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