La liste déroulante du bootstrap de Twitter sort de l'écran

151

Je veux implémenter le menu déroulant de bootstrap de Twitter, voici mon code:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

La liste déroulante fonctionne bien, ma liste déroulante est placée à côté du bord droit de l'écran et lorsque je clique sur ma bascule déroulante, la liste sort de l'écran. Cela ressemble à l'écran:

entrez la description de l'image ici

Comment puis-je y remédier?

html css twitter-bootstrap cliquet
la source
La bonne réponse (pour bootstrap> = v 3.2.0) à cette question est résolue ici: stackoverflow.com/questions/23654962/... par @cvrebert.
Michael Trouw
Je crois qu'il manque une balise end span dans votre code: </span>
stealthysnacks

Réponses:

263

ajouter .pull-rightà ul.dropdown-menudevrait le faire

Avis de dépréciation : à partir de Bootstrap v3.1.0, .pull-rightles menus déroulants sont obsolètes . Pour aligner un menu à droite, utilisez .dropdown-menu-right.

Ross
la source
29
C'est une question complètement distincte
Dewayne
14
Cette réponse ne résout pas réellement le problème si l'utilisateur utilise un appareil d'écran plus petit - il sort du côté gauche au lieu du côté droit (en fait, vous changez simplement le tirage à gauche vers le tirage à droite).
Anonyme
5
Voir la réponse de krzychu comme Bootstrap.pull-right est obsolète
Jeroen
1
@HristoEnev moi non plus. Vos listes déroulantes se sont-elles bien éloignées du bouton?
Choylton B.Higginbottom
116

Depuis Bootstrap v3.1.0, l'ajout .pull-rightest obsolète dans les menus déroulants. A .dropdown-menu-rightdoit être ajouté à la ul.dropdown-menuplace. Docs

Krzychu
la source
10
Même avec le dernier bootstrap, .pull-right fonctionne pour moi, et .dropdown-menu-right ne fait rien.
Shane Grant
Cela fonctionne en effet dans Bootstrap 4, sauf que vous ajoutez la classe .dropdown-menu-right à div.dropdown-menu (pas ul)
Timothy Kanski
<ul class="dropdown-menu dropdown-menu-right">travaillé pour moi le 4.1.1
dw1
22

Pour Bootstrap 4, l'ajout dropdown-menu-rightfonctionne. Voici un exemple de travail.

http://codeply.com/go/w2MJngNkDQ

praj
la source
J'ai essayé toutes les autres réponses, et celle-ci était la seule qui fonctionnait aussi pour moi. J'utilise Bootstrap v. 4.1.0.
Zeth
14

une solution qui n'a pas besoin de modifier le HTML seul le CSS est

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

C'est particulièrement utile pour les menus générés dynamiquement où il n'est pas toujours possible d'ajouter la classe recommandée dropdown-menu-rightau dernier élément

GiorgosK
la source
1
c'est la seule solution qui fonctionne pour bootstrap 4.0.0
charsi
10

Vous pouvez utiliser la classe .dropdown-pull-rightavec les css suivants:

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
Développer l'extrait

Mohan Dere
la source
2

dans Bootstrap 4, vous pouvez utiliser .dropleft

changez simplement en:

<span class="dropleft">

ou

ajoutez .dropdown-menu- {lg, med, sm, xs} -droite à votre menu déroulant 

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
Dedy Setiawan
la source
1

float-*-right pour Bootstrap 4

* = xs, sm, md, lg

Jeremy Lynch
la source
0

Je ne peux pas laisser de commentaire car mon niveau de SO est trop bas, mais je me suis juste assuré que le conteneur parent est défini sur "overflow: hidden" comme tel (assurez-vous également que la position est définie).

<div style="overflow:hidden;position:relative">
    <span class="dropdown"> 
    <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li class="divider"></li>
      <li><a href="#">d</a></li>
    </ul>
</div>
hackdotslashdotkill
la source