Bootstrap : Position du menu déroulant par rapport à l'élément de la barre de navigation

Question

J'ai la liste déroulante suivante

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

Le coin supérieur gauche de la liste déroulante se trouve au coin inférieur gauche du texte (Action), mais j'espère que la position du coin supérieur droit de la liste déroulante se trouve à l'endroit inférieur droit du texte. Comment puis-je faire cela ?

Answer 1

C'est l'effet que nous essayons d'obtenir :

Les classes qui doivent être appliquées ont changé avec la version 3.1.0 de Bootstrap, puis avec la version 4 de Bootstrap. Si l'une des solutions ci-dessous ne semble pas fonctionner Vérifiez le numéro de la version de Bootstrap que vous importez. et en essayer un autre.

Avant v3.1.0

Vous pouvez utiliser le pull-right pour aligner le côté droit du menu sur le signe d'insertion :

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

Violon : http://jsfiddle.net/joeczucha/ewzafdju/

Après la v3.1.0

Depuis la version 3.1.0, nous avons supprimé l'option .pull-right pour les menus déroulants. Pour aligner un menu à droite, utilisez .dropdown-menu-right. Nav aligné à droite alignés à droite dans la barre de navigation utilisent une version mixine de cette classe pour aligner automatiquement le menu. Pour la remplacer, utilisez .dropdown-menu-left.

Vous pouvez utiliser le dropdown-right pour aligner le côté droit du menu sur le signe d'insertion :

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

Violon : http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

La classe pour Bootstrap 4 est la même que pour Bootstrap > 3.1.0, mais attention, le reste du balisage environnant a un peu changé :

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Violon : https://jsfiddle.net/joeczucha/f8h2tLoc/

Bootstrap 5

Encore une fois, c'est très similaire pour Bootstrap 5, sauf que maintenant c'est dropdown-menu-end

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-end">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Violon : https://jsfiddle.net/joeczucha/psnz2u36/

Answer 2

Je ne sais pas comment les autres personnes résolvent ce problème ou si Bootstrap a une configuration pour cela.

J'ai trouvé ce fil de discussion qui fournit une solution :

https://github.com/twbs/bootstrap/issues/1411

L'un des postes suggère l'utilisation de

<ul class="dropdown-menu" style="right: 0; left: auto;">

J'ai testé et cela fonctionne.

J'espère savoir si Bootstrap fournit une configuration pour faire cela, pas via le css ci-dessus.

A la vôtre.

Answer 3

Basé sur le doc Bootstrap :

Depuis la version 3.1.0, .pull-right n'est plus utilisé pour les menus déroulants. Utilisez .dropdown-menu-right

eg :

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

Answer 4

Si vous voulez afficher le menu vers le haut, il suffit d'ajouter la classe "dropup".
et supprimer la classe "dropdown" si elle existe dans la même division.

<div class="btn-group dropup">

Answer 5

Même s'il est tard, j'espère pouvoir aider quelqu'un. Si le menu déroulant ou le sous-menu se trouve sur le côté droit de l'écran, il s'ouvre sur le côté gauche, si le menu ou le sous-menu se trouve sur le côté gauche, il s'ouvre sur le côté droit.

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;

    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

Pour détecter la position verticale, vous pouvez également ajouter

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/