Maison > Article > interface Web > Comment empêcher l’expansion du conteneur de menu défilant Bootstrap ?
Menu défilant avec Bootstrap : empêcher l'expansion des conteneurs
Problème d'origine :
Tentatives de mise en œuvre un menu déroulant avec Bootstrap utilisant une certaine méthode entraîne une expansion indésirable du conteneur du menu.
Solution :
Pour résoudre ce problème, vous pouvez appliquer directement les propriétés CSS à votre classe de menu déroulant :
<code class="css">.scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; }</code>
Ceci contiendra le menu dans son propre espace, l'empêchant d'agrandir le conteneur.
HTML mis à jour :
<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>
Approches alternatives compatibles avec Bootstrap :
Bootstrap 4/5 :
Définir la hauteur maximale sur le .dropdown- classe de menu :
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
Menu horizontal utilisant Flexbox :
Envisagez d'utiliser flexbox pour une alternative au menu horizontal :
https://codeply. com/p/shJzHGE84z
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!