Bagaimana untuk Mencipta Menu Boleh Tatal dengan Bootstrap Tanpa Mengembangkan Bekasnya?

Menu Boleh Tatal dengan Bootstrap - Menu Memanjangkan Bekas

Isu

Menggunakan kaedah yang disediakan untuk mencipta menu boleh tatal dengan Bootstrap mengakibatkan menu mengembangkan bekasnya apabila ia tidak seharusnya. Bagaimanakah perkara ini boleh diselesaikan?

Penyelesaian untuk Bootstrap 5

Untuk Bootstrap 5, gunakan CSS berikut:

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

Penyelesaian untuk Bootstrap 4

Untuk Bootstrap 4, gunakan CSS yang sama seperti di atas.

Penyelesaian Alternatif untuk Bootstrap 3

Sebagai alternatif, untuk Bootstrap 3, tambahkan CSS dan HTML berikut:

CSS

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

HTML

<ul class="dropdown-menu scrollable-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <!-- ... -->
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
</ul>

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