Bagaimana untuk Menghalang Menu Jatuh Turun Bootstrap daripada Mengembangkan Bekasnya apabila Menjadikannya Boleh Ditatal?

Menu Boleh Tatal dengan Bootstrap - Menghalang Pengembangan Bekas

Apabila melaksanakan menu boleh tatal dengan Bootstrap, adalah penting untuk mengelakkan isu menu mengembangkan bekasnya. Berikut ialah penyelesaian yang secara langsung menangani masalah ini:

Dalam CSS anda, tambahkan gaya berikut pada kelas menu boleh tatal:

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

Contohnya:

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

Dalam HTML anda, gunakan kelas menu boleh tatal pada menu lungsur turun yang anda mahu jadikan boleh tatal:

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

Dengan perubahan ini, menu boleh tatal anda akan mempunyai ketinggian maksimum 200px, menghalangnya daripada mengembangkan yang mengandungi bekas. Laraskan sifat ketinggian maksimum mengikut keperluan untuk memenuhi keperluan reka bentuk anda.

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