Comment empêcher le menu déroulant Bootstrap d'étendre son conteneur ?

Menu défilant avec Bootstrap : résoudre les problèmes d'expansion des conteneurs

Introduction

Création d'un menu déroulant dans Bootstrap est une exigence courante. Cependant, dans certaines implémentations, il a été observé que le menu déroulant agrandissait son conteneur, entraînant un comportement indésirable. Cet article cherche à fournir une solution à ce problème.

Comprendre le problème de l'expansion des conteneurs

Dans la méthode décrite dans la question, l'utilisation de plusieurs listes déroulantes imbriquées- Les éléments de menu peuvent conduire à l'expansion du conteneur externe lorsque le menu déroulant est rempli avec un grand nombre d'éléments. Cette expansion se produit parce que la largeur du conteneur externe s'ajuste pour s'adapter à la largeur croissante des menus déroulants imbriqués.

解决方案

Pour résoudre ce problème, une classe CSS distincte peut être appliqué au menu déroulant, tel que le menu déroulant. Dans cette classe, les propriétés CSS 以下 doivent être spécifiées :

.scroll-menu {
    height: auto;
    max-height: [desired height];
    overflow-y: auto;
}

HTML mis à jour :

L'extrait HTML suivant montre comment appliquer la classe de menu déroulant à un menu déroulant :

<ul class="dropdown-menu scroll-menu">
    <!-- Scrollable menu items here -->
</ul>

Approches alternatives

De plus, les approches alternatives suivantes peuvent être envisagées :

• Bootstrap 5 : Utilisez max-height pour rendre la liste déroulante déroulante :

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

• Bootstrap 4 : Définissez la hauteur maximale sur la classe de menu spécifique :

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

• Menu horizontal : Pensez à utiliser un menu horizontal qui fournit nativement une fonctionnalité de défilement, éliminant ainsi le besoin de CSS personnalisé.

Conclusion

En appliquant la classe et les propriétés CSS suggérées au menu déroulant, le problème d'expansion du conteneur peut être résolu. Alternativement, les approches alternatives suggérées offrent des options supplémentaires pour créer des menus déroulants qui résolvent ce problème.

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!