Bagaimana untuk Menghalang Menu Boleh Tatal Bootstrap daripada Mengembangkan Bekasnya?

Mary-Kate Olsen
Lepaskan: 2024-10-29 22:42:02
asal
453 orang telah melayarinya

How to Prevent Bootstrap Scrollable Menu from Expanding its Container?

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

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

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;
}
Salin selepas log masuk
  • Bootstrap 4: Tetapkan max-height pada kelas menu tertentu:
.my-scrollable-menu {
    max-height: 280px;
    overflow-y: auto;
}
Salin selepas log masuk
  • 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!

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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!