Twitter bootstrap déroulante se passe en dehors de l'écran

Question

Je veux mettre en œuvre twitter bootstrap menu déroulant, 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>

Liste déroulante fonctionne bien, ma liste déroulante est placé à côté du bord droit de l'écran et quand je clique sur mon dropdown-toggle, la liste est longue en dehors de l'écran. Il ressemble à l'écran:

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

Answer 1

l'ajout d' .pull-right de ul.dropdown-menu devrait le faire

Answer 2

Depuis Bootstrap v3.1.0 ajouter .pull-right est obsolète. Un .dropdown-menu-right doit être ajoutée à l' ul.dropdown-menu à la place. Docs