La bulle de la liste déroulante bootstrap est alignée à droite (pas à droite)

89

J'ai un panier dans mon menu principal, en utilisant push-right et mon problème est que la bulle déroulante tombe hors de la page. J'essaie d'aligner la bulle à droite, de sorte qu'elle s'aligne à droite avec 'clic'

comme ça

entrez la description de l'image ici

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>
html css twitter-bootstrap no0ne
la source
2
Il vaut mieux mettre dans jsfiddle.net pour montrer aux autres ce que vous avez.
JofryHS
avez-vous essayé right:0;le menu déroulant?
Rahul

Réponses:

189

Bootstrap 3.1+

Ajout de la classe .dropdown-menu-right au même div contenant le menu déroulant de la classe:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 et 3.0

Ajoutez la classe .pull-right au même div contenant le menu déroulant de la classe 

<div class="dropdown-menu pull-right">
    STUFF
</div>

Cela semble fonctionner pour moi en utilisant bootstrap 3.0

Meetri
la source
20
Depuis la v3.1.0, vous pouvez utiliser le menu déroulant à droite . Voir github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135
Laurent Dezitter
19

Cela peut être résolu avec la classe bootstrap dropdown-menu-right avec dropdown-menuqui est spécifiquement pour ce problème qui utilise les propriétés css right: 0;et left: auto;pour l'aligner à droite.

Cette solution fonctionne pour moi.

Source - http://getbootstrap.com/components/#btn-dropdowns-dropup (accédez aux outils de développement pour cela)

Jaspreet Singh
la source
1
Oui, c'est la bonne solution (Bootstrap 3.3.7). Assurez-vous simplement d'ajouter la classe dropdown-menu-rightà la ulqui contient les options de menu (pas au bouton)
Miguel
6 
<div class="dropdown-menu dropdown-menu-right">

Cela fonctionne toujours dans boostrap 4.2.1 :)

Georgi Peev
la source
5

dans bootstrap v 3.1.0la réponse à cette question est différente.

jsfiddle

<div class="dropdown-menu pull-menu-right">
       STUFF
</div>
Passionné de codage
la source
2

ok compris!

position:relative;left:0 sur <ul class="dropdown-menu">

no0ne
la source