Comment créer un menu déroulant avec Bootstrap sans étendre son conteneur ?

Menu défilant avec Bootstrap - Conteneur d'extension de menu

Problème

Utilisation de la méthode fournie pour créer un menu déroulant avec Bootstrap le menu étend son conteneur lorsqu'il ne seharusnya pas. Comment cela peut-il être résolu ?

Solution pour Bootstrap 5

Pour Bootstrap 5, appliquez le CSS suivant :

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

Solution pour Bootstrap 4

Pour Bootstrap 4, appliquez le même CSS que ci-dessus.

Solution alternative pour Bootstrap 3

Alternativement, pour Bootstrap 3, ajoutez le CSS et le HTML suivants :

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!