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!