Bagaimana untuk Menutup Nav Responsif dengan Menu Produk Klik dalam Bootstrap?

Menutup Nav Responsif dengan Menu Produk Klik dalam Bootstrap

Apabila mengembangkan menu utama dalam mod responsif, anda mungkin menghadapi masalah dengan keruntuhan automatik apabila mengklik item menu "PRODUK". Untuk menyelesaikan masalah ini, anda boleh memanfaatkan atribut dan kelas data terbina dalam Bootstrap.

Daripada menggunakan JavaScript tambahan, tambahkan atribut data berikut pada item senarai menu anda:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Ulang ini untuk setiap item menu.

Pelarasan Tambahan untuk Responsif Reka Bentuk

Untuk menangani isu dengan kandungan yang melimpah dan kelipan pada skrin yang lebih besar, gunakan kod berikut:

<li><a href="#products">

Ini memberikan atribut data khusus berdasarkan saiz skrin, menghapuskan gangguan pada desktop menu.

Mengemas kini untuk Bootstrap Versi

Untuk Bootstrap versi 4.1.3 dan 5.0, gantikan kelas yang boleh dilihat/tersembunyi dengan d-none d-sm-block dan d-block d-sm-none.

Dalam Bootstrap 5, ubah suai atribut data kepada data-bs-toggle dan data-bs-target.

Dengan pelarasan ini, anda boleh menutup bar navigasi responsif secara automatik dan memaparkan menu produk tanpa masalah fungsian merentas saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Menutup Nav Responsif dengan Menu Produk Klik dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!