Wie erstelle ich mit Bootstrap ein scrollbares Menü, ohne seinen Container zu erweitern?

Scrollbares Menü mit Bootstrap – Container zur Menüerweiterung

Problem

Verwendung der bereitgestellten Methode zum Erstellen eines scrollbaren Menüs mit Bootstrap führt dazu, dass das Menü seinen Container erweitert, wenn dies nicht der Fall ist. Wie kann das gelöst werden?

Lösung für Bootstrap 5

Für Bootstrap 5 wenden Sie das folgende CSS an:

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

Lösung für Bootstrap 4

Wenden Sie für Bootstrap 4 das gleiche CSS wie oben an.

Alternative Lösung für Bootstrap 3

Alternativ können Sie für Bootstrap 3 das folgende CSS und HTML hinzufügen:

CSS

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Bootstrap ein scrollbares Menü, ohne seinen Container zu erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!