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

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!