Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh menukar Titik Putus Navbar Bootstrap Tanpa Menggunakan KURANG?

Bagaimanakah saya boleh menukar Titik Putus Navbar Bootstrap Tanpa Menggunakan KURANG?

Barbara Streisand
Barbara Streisandasal
2024-12-19 22:20:13126semak imbas

How Can I Change the Bootstrap Navbar Collapse Breakpoint Without Using LESS?

Cara Laraskan Titik Putus Navbar Bootstrap Tanpa KURANG

Navbar Bootstrap 3 runtuh secara lalai apabila lebar penyemak imbas menurun di bawah 768px. Titik putus ini boleh dilaraskan kepada nilai tersuai menggunakan penggantian CSS. Begini cara untuk melakukannya tanpa menggunakan KURANG:

Bootstrap 5 (Kemas Kini 2023)

  • Untuk bar navigasi yang tidak pernah runtuh, tambahkan .navbar-expand kelas.
  • Untuk bar navigasi yang sentiasa runtuh, jangan gunakan .navbar-expand.

Bootstrap 4 (2018 Update)

  • Gunakan kelas .navbar-expand-* untuk menentukan dikehendaki titik putus.

    • .navbar-expand-sm: Runtuh di bawah 576px
    • .navbar-expand-md: Runtuhkan di bawah 768px
    • .navbar-expand-lg: Runtuh di bawah 992px
    • .navbar-expand-xl: Runtuh di bawah 1200px
    • .navbar-expand: Jangan sekali-kali runtuh
    • (Tiada kelas kembangkan): Sentiasa runtuh
  • Untuk titik putus tersuai, gunakan CSS:
@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    ...
  }
}

Bootstrap 3 (Pra-2018)

  • Timpa titik putus lalai dengan CSS berikut:
@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}
  • Ganti "991px" dengan yang anda inginkan titik putus.

Nota:

  • Kaedah di atas mengatasi kelakuan lalai untuk semua halaman.
  • Anda boleh menggunakan peranti- pertanyaan media khusus untuk menyasarkan titik putus yang berbeza pada peranti yang berbeza.
  • Ingat untuk menguji perubahan anda dengan teliti untuk memastikan mereka tidak melanggar mana-mana aspek lain tapak web anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar Titik Putus Navbar Bootstrap Tanpa Menggunakan KURANG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn