comment faire en sorte que le sous-menu de twitter bootstrap s'ouvre sur le côté gauche ?

Question

J'ai essayé de créer un sous-menu twitter bootstrap dans un menu déroulant, mais j'ai un problème : j'ai un menu déroulant dans le coin supérieur droit de la page et ce menu a un autre sous-menu. Cependant, lorsque le sous-menu s'ouvre, il ne tient pas dans la fenêtre et va trop à droite, de sorte que l'utilisateur ne peut voir que les premières lettres. Comment faire pour que ce sous-menu ne s'ouvre pas à droite, mais à gauche ?

Answer 1

Si j'ai bien compris, bootstrap fournit une classe CSS pour ce cas précis. Ajoutez 'pull-right' au menu 'ul' :

<ul class="dropdown-menu pull-right">

et le résultat final est que les options de menu apparaissent alignées à droite, en ligne avec le bouton dont elles descendent.

Answer 2

Le moyen le plus simple serait d'ajouter l'élément pull-left à votre dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle : DEMO

Answer 3

Classe actuelle .dropdown-submenu > .dropdown-menu ont left: 100%; . Ainsi, si vous souhaitez ouvrir le sous-menu sur le côté gauche, remplacez ces paramètres par une position négative à gauche. Par exemple left: -95%; . Vous obtenez alors un sous-menu sur le côté gauche, et vous pouvez modifier d'autres paramètres pour obtenir un aperçu parfait.

Voici DEMO

EDIT : La question de l'OP et ma réponse datent d'août 2012. Pendant ce temps, Bootstrap a changé, donc maintenant vous avez la classe .pull-left. À l'époque, ma réponse était correcte. Maintenant, vous n'avez pas à définir manuellement les css, vous avez cette classe .pull-left.

EDIT 2 : Les démos ne fonctionnent pas, car Bootstrap a changé leurs URL. Il suffit de modifier les ressources externes dans jsfiddle et de les remplacer par les nouvelles.

Answer 4

Si vous utilisez bootstrap v4, il existe une nouvelle façon de procéder.

Vous devez utiliser .dropdown-menu-right sur le .dropdown-menu élément.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Lien vers le code : https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Answer 5

La façon correcte d'effectuer cette tâche est :

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }