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
Lepaskan: 2024-12-19 22:20:13
asal
122 orang telah melayarinya

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;
    ...
  }
}
Salin selepas log masuk

Bootstrap 3 (Pra-2018)

  • Timpa titik putus lalai dengan CSS berikut:
@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}
Salin selepas log masuk
  • 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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan