Bagaimana untuk Menghalang Menu Boleh Tatal Bootstrap daripada Mengembangkan Bekasnya?

Menu Boleh Tatal dengan Bootstrap: Menangani Isu Pembesaran Bekas

Pengenalan

Mencipta menu boleh tatal dalam Bootstrap adalah keperluan biasa. Walau bagaimanapun, dalam beberapa pelaksanaan, telah diperhatikan bahawa menu boleh tatal mengembangkan bekasnya, mengakibatkan tingkah laku yang tidak diingini. Artikel ini berusaha untuk memberikan penyelesaian kepada isu ini.

Memahami Isu dengan Peluasan Bekas

Dalam kaedah yang diterangkan dalam soalan, penggunaan lungsur turun bersarang berganda- elemen menu boleh menyebabkan bekas luar berkembang apabila menu boleh ditatal diisi dengan sejumlah besar item. Peluasan ini berlaku kerana lebar bekas luar melaraskan untuk menampung peningkatan lebar menu lungsur turun bersarang.

解决方案

Untuk menangani isu ini, kelas CSS yang berasingan boleh digunakan pada menu boleh ditatal, seperti menu tatal. Dalam kelas ini, sifat CSS以下 harus ditentukan:

.scroll-menu {
    height: auto;
    max-height: [desired height];
    overflow-y: auto;
}

HTML yang dikemas kini:

Coretan HTML berikut menunjukkan cara menggunakan kelas menu tatal pada menu boleh tatal:

<ul class="dropdown-menu scroll-menu">
    <!-- Scrollable menu items here -->
</ul>

Pendekatan Alternatif

Selain itu, pendekatan alternatif berikut boleh dipertimbangkan:

• Bootstrap 5: Gunakan max-height untuk menjadikan dropdown boleh ditatal:

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

• Bootstrap 4: Tetapkan max-height pada kelas menu tertentu:

.my-scrollable-menu {
    max-height: 280px;
    overflow-y: auto;
}

• Menu Mendatar: Pertimbangkan untuk menggunakan menu mendatar yang menyediakan fungsi menatal secara asli, menghapuskan keperluan untuk CSS tersuai.

Kesimpulan

Dengan menggunakan kelas dan sifat CSS yang dicadangkan pada menu boleh ditatal, isu pengembangan kontena boleh diselesaikan. Sebagai alternatif, pendekatan alternatif yang dicadangkan menawarkan pilihan tambahan untuk mencipta menu boleh tatal yang menangani masalah ini.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Menu Boleh Tatal Bootstrap daripada Mengembangkan Bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!