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

Boostrap a une classe pour cela appelée navbar-right . Votre code sera donc le suivant :

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

Answer 2

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

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

Answer 3

Comment faire pour qu'il n'y ait pas de côté relatif de l'écran (comme un utilisateur @JD11 il répond en bas) et de côté relatif du bloc (div) ?

par exemple à l'intérieur d'un div avec la classe "card-body" :

<div class="card-body">
    <div class="btn-group">
        <button type="button" class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
        <div class="dropdown-menu">
            <span class="text-nowrap">Name</span><br><a href="#">Namber</a>
        </div>
    </div>
</div>