Twitter Bootstrap dropdown va en dehors de l'écran

Je veux implémenter le menu déroulant twitter bootstrap, 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>

Dropdown fonctionne bien, ma liste déroulante est placée à côté du bord droit de l'écran et lorsque je clique sur mon dropdown-toggle, la liste sort de l'écran. Il ressemble à l'écran:

entrez la description de l'image ici

Comment puis-je résoudre ce problème?

126
demandé sur Judah Himango 2012-12-10 22:19:14

6 réponses

Ajout de .pull-right à ul.dropdown-menu devrait le faire

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

219
répondu Ross 2016-09-09 03:54:23

Depuis Bootstrap v3.1.0 l'ajout de .pull-right est obsolète dans les menus déroulants. Un .dropdown-menu-right devrait être ajouté à ul.dropdown-menu à la place. Docs

106
répondu krzychu 2015-08-22 08:46:24

, Vous pouvez utiliser la classe .dropdown-pull-right avec css suivante:

.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>
9
répondu Mohan Dere 2017-07-14 11:11:51

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-right au dernier élément

8
répondu GiorgosK 2017-03-23 13:35:31

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

Http://codeply.com/go/w2MJngNkDQ

5
répondu praj 2018-03-09 21:03:47

float-*-right pour Bootstrap 4

* = xs, sm, md, lg

1
répondu Jeremy Lynch 2016-12-23 08:25:26