Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menghalang Pengembangan Bekas Menu Boleh Tatal Bootstrap?

Bagaimana untuk Menghalang Pengembangan Bekas Menu Boleh Tatal Bootstrap?

Patricia Arquette
Patricia Arquetteasal
2024-10-31 14:03:02647semak imbas

How to Prevent Bootstrap Scrollable Menu Container Expansion?

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!

Kenyataan:
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