Heim  >  Artikel  >  Web-Frontend  >  Wie verhindert man die Erweiterung des scrollbaren Bootstrap-Menücontainers?

Wie verhindert man die Erweiterung des scrollbaren Bootstrap-Menücontainers?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-31 14:03:02647Durchsuche

How to Prevent Bootstrap Scrollable Menu Container Expansion?

Scrollbares Menü mit Bootstrap: Containererweiterung verhindern

Ursprüngliches Problem:

Versuche zur Implementierung Ein scrollbares Menü mit Bootstrap unter Verwendung einer bestimmten Methode führt zu einer unerwünschten Erweiterung des Menücontainers.

Lösung:

Um dieses Problem zu beheben, können Sie CSS-Eigenschaften direkt anwenden zu Ihrer scrollbaren Menüklasse:

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

Dies enthält das Menü in seinem eigenen Bereich und verhindert, dass es den Container erweitert.

Aktualisiertes HTML:

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

Alternative Ansätze, die mit Bootstrap kompatibel sind:

Bootstrap 4/5:

Legen Sie die maximale Höhe im Dropdown-Menü fest. Menüklasse:

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

Horizontales Menü mit Flexbox:

Erwägen Sie die Verwendung von Flexbox für eine horizontale Menüalternative:

https://codeply. com/p/shJzHGE84z

Das obige ist der detaillierte Inhalt vonWie verhindert man die Erweiterung des scrollbaren Bootstrap-Menücontainers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn