Comment empêcher un menu déroulant Bootstrap d'étendre son conteneur lorsqu'il est rendu défilant ?

Menu défilant avec Bootstrap - Empêcher l'expansion du conteneur

Lors de la mise en œuvre d'un menu déroulant avec Bootstrap, il est crucial d'éviter le problème de l'extension du conteneur par le menu. Voici une solution qui résout directement ce problème :

Dans votre CSS, ajoutez les styles suivants à la classe de menu déroulant :

<code class="css">.scrollable-menu {
    height: auto;
    max-height: <desired max-height>;
    overflow-x: hidden;
}</code>

Par exemple :

<code class="css">.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}</code>

Dans votre HTML, appliquez la classe scrollable-menu au menu déroulant que vous souhaitez rendre scrollable :

<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>

Avec ces modifications, votre menu déroulant aura une hauteur maximale de 200 px, l'empêchant d'étendre la contenant un conteneur. Ajustez la propriété max-height selon vos besoins pour répondre à vos exigences de conception.

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!