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

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:

Comment puis-je y remédier?

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.

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

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

http://codeply.com/go/w2MJngNkDQ

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

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>

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>

float-*-right pour Bootstrap 4

* = xs, sm, md, lg

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>