Maison > Article > interface Web > 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 :
.dropdown-menu { max-height: 280px; overflow-y: auto; }
.my-scrollable-menu { max-height: 280px; overflow-y: auto; }
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!