Bagaimana untuk Menghalang Pengembangan Bekas Menu Boleh Tatal Bootstrap?

Menu Boleh Tatal dengan Bootstrap: Mencegah Pembesaran Bekas

Isu Asal:

Percubaan untuk melaksanakan menu boleh tatal dengan Bootstrap menggunakan kaedah tertentu mengakibatkan pengembangan bekas menu yang tidak diingini.

Penyelesaian:

Untuk menyelesaikan isu ini, anda boleh terus menggunakan sifat CSS ke kelas menu boleh tatal anda:

<code class="css">.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}</code>

Ini akan mengandungi menu dalam ruangnya sendiri, menghalangnya daripada mengembangkan bekas.

HTML yang dikemas kini:

<code class="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="#">Action</a></li>
    <li><a href="#">Another action</a></li>
</ul></code>

Pendekatan Alternatif Serasi dengan Bootstrap:

Bootstrap 4/5:

Tetapkan ketinggian maksimum pada .dropdown- kelas menu:

<code class="css">.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}</code>

Menu Mendatar Menggunakan Flexbox:

Pertimbangkan untuk menggunakan flexbox untuk alternatif menu mendatar:

https://codeply. com/p/shJzHGE84z

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