web-dev-qa-db-fra.com

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

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 menu déroulant se trouve à la partie inférieure droite du texte. Comment puis je faire ça?

Merci et salutations.

csstwitter-bootstrapdrop-down-menu
94
curious1

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

A right-aligned menu

Les classes devant être appliquées ont été modifiées avec la version Bootstrap 3.1.0 et à nouveau avec la version Bootstrap 4. Si l'une des solutions ci-dessous ne semble pas fonctionner revé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 classe pull-right 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 v3.1.0

Depuis la version 3.1.0, nous avons déconseillé d'utiliser .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 classe dropdown-right 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 identique à Bootstrap> 3.1.0, il suffit de regarder comme 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/

189
Joe Czucha

Pas sûr de la façon dont d'autres personnes résolvent ce problème ou de savoir si Bootstrap a une configuration pour cela.

J'ai trouvé ce fil qui fournit 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 le faire, pas via le CSS ci-dessus.

À votre santé.

48
curious1

Basé sur Bootstrap doc:

À partir de la version 3.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">
19
ninetiger

Si vous souhaitez afficher le menu, ajoutez simplement la classe "dropup"
et supprimez la classe "menu déroulant" s'il existe à partir du même div.

<div class="btn-group dropup">

enter image description here

10
Philip Enc

Boostrap a une classe pour cela appelée navbar-right. Donc, 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>
1
Andrei Stalbe

Même s’il est tard, j’espère pouvoir aider quelqu'un. si le menu déroulant ou le sous-menu se trouve à droite de l'écran, il est ouvert à gauche. Si le menu ou le sous-menu se trouve à gauche, il est ouvert à droite.

$(".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/

1
JD11

Si vous souhaitez centrer la liste déroulante, voici la solution.

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