Menu Boleh Tatal dengan Bootstrap: Menangani Isu Peluasan Menu
Percubaan sebelum ini untuk melaksanakan menu boleh tatal dengan Bootstrap menyebabkan menu mengembangkan bekasnya . Tingkah laku ini adalah tidak diingini, terutamanya jika dibandingkan dengan menu yang tidak boleh ditatal, yang tidak menunjukkan isu ini.
Strategi Penyelesaian
Untuk menangani masalah ini, terdapat dua pendekatan utama:
1. Kemas kini Sifat CSS
Hanya menambah sifat CSS tertentu pada kelas menu boleh tatal boleh menyelesaikan isu tersebut.
<code class="css">.scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; }</code>
2. Gunakan Kemas Kini Bootstrap
Bootstrap telah berkembang dari semasa ke semasa, memperkenalkan perubahan pada penanda lungsur turun. Mengemas kini markup dan CSS mengikut versi semasa boleh memastikan keserasian dan menangani isu tersebut.
Untuk Bootstrap 5:
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
Untuk Bootstrap 4:
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
Menu Mendatar Alternatif untuk Bootstrap 4 Menggunakan Flexbox
Susun atur menu alternatif ini memanfaatkan Flexbox untuk reka bentuk menu. Ia menawarkan pendekatan berbeza untuk mencipta menu boleh tatal dalam rangka kerja Bootstrap.
Atas ialah kandungan terperinci Berikut ialah beberapa pilihan tajuk untuk artikel anda, dengan mengambil kira format soalan-jawapan dan kandungannya: Langsung & Ringkas: * Menu Boleh Tatal dalam Bootstrap: Bagaimana untuk Membetulkan Pengembangan Bekas? * Boo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!