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


108

J'ai le menu déroulant suivant

<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 dans le coin inférieur gauche du texte (Action), mais j'espère que la position du coin supérieur droit du dropdwon est à l'endroit inférieur droit du texte. Comment puis je faire ça?

Réponses:


229

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

Un menu aligné à droite

Les classes à appliquer ont changé avec la version de Bootstrap 3.1.0 et à nouveau avec la version de Bootstrap 4. Si l'une des solutions ci-dessous ne semble pas fonctionner, vérifiez le numéro de version de Bootstrap que vous importez et essayez-en un autre.

Bootstrap 3

Avant la v3.1.0

Vous pouvez utiliser la pull-rightclasse pour aligner le côté droit du menu avec le curseur:

<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 v3.1.0, nous avons abandonné .pull-right dans les menus déroulants. Pour aligner un menu à droite, utilisez .dropdown-menu-right. Les composants de navigation alignés à droite dans la barre de navigation utilisent une version mixin de cette classe pour aligner automatiquement le menu. Pour le remplacer, utilisez .dropdown-menu-left.

Vous pouvez utiliser la dropdown-rightclasse pour aligner le côté droit du menu avec le curseur:

<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 Bootstrap> 3.1.0, faites juste attention car 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/


1
J'ai testé le pull-right et le pull-left sur le site RTL. Ils fonctionnent parfaitement, mais pas le menu déroulant à droite et le menu déroulant à gauche.
curieux1

Le conteneur (.dropdown) doit afficher "inline-bock". Dans cet exemple, le LI est très bien, mais s'il s'agissait d'un DIV, l'alignement serait placé à la fin de l'élément de bloc qui est influencé par la largeur du sous-menu.
Nicholas

La classe "dropdown-menu-right" a également fait l'affaire avec Bootstrap 4 (beta). Merci! "pull-right" ne fonctionnait pas.
Andreas Vogl

l'utilisation a class="dropdown"été la clé pour moi afin d'obtenir un bon alignement
Louis

50

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

J'ai trouvé ce fil qui apporte une solution:

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

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

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

J'ai testé et ça marche.

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

À votre santé.


1
merci, celui-ci a fonctionné pour bootstrap 4 dropdown dans une barre de navigation
Petru Lebada

20

Basé sur la documentation Bootstrap:

Depuis la v3.1.0, .pull-right est obsolète dans les menus déroulants. utilisez .dropdown-menu-right

par exemple:

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

1
J'ai testé le pull-right et le pull-left sur le site RTL. Ils fonctionnent parfaitement, mais pas le menu déroulant à droite et le menu déroulant à gauche.
curieux1

10

Si vous voulez afficher le menu vers le haut, ajoutez simplement la classe "dropup"
et supprimez la classe "dropdown" si elle existe à partir du même div.

<div class="btn-group dropup">

entrez la description de l'image ici


1
"J'espère que la position du coin supérieur droit du dropdwon est à l'endroit inférieur droit du texte" - OP
Joe Czucha

Je ne comprends pas votre commentaire, désolé !!
Philip Enc

Ça a l'air bien mais, comment pouvons-nous le rendre automatique? Comme j'ai une liste de données et la partie inférieure n'est pas sûre.
Santosh

2

Même s'il est tard, j'espère pouvoir aider quelqu'un. si le menu déroulant ou le sous-menu est sur le côté droit de l'écran, il est ouvert sur le côté gauche, si le menu ou le sous-menu est sur la gauche, il est ouvert 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/


peut-il être ajusté en haut et en bas aussi? si le lien déroulant est en bas, je voudrais l'ouvrir dans la direction supérieure? Pouvons-nous y parvenir?
Santosh

1
J'ai mis à jour ma réponse pour détecter la position verticale?
JD11

1

Boostrap a une classe pour cela appelé navbar-right. Ainsi, votre code ressemblera à ceci:

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

0

Si vous souhaitez centrer la liste déroulante, c'est la solution.

<ul class="dropdown-menu" style="right:auto; left: auto;">
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.