Twitterブートストラップドロップダウンが画面の外に出る

Twitterブートストラップドロップダウンメニューを実装したいのですが、これが私のコードです。

<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>

ドロップダウンは適切に機能し、ドロップダウンは画面の右端の隣に配置されます。ドロップダウントグルをクリックすると、リストが画面の外に出ます。次のような画面になります。

どうすれば修正できますか？

に追加.pull-rightするul.dropdown-menu必要があります

非推奨のお知らせ： Bootstrap v3.1.0以降.pull-right、ドロップダウンメニューは非推奨になりました。メニューを右揃えするには、を使用します.dropdown-menu-right。

Bootstrap v3.1.0以降.pull-right、ドロップダウンメニューでの追加は非推奨になりました。Aは.dropdown-menu-rightに追加する必要がありますul.dropdown-menu代わりに。文書

Bootstrap 4の場合、dropdown-menu-right動作を追加します。これが実際の例です。

http://codeply.com/go/w2MJngNkDQ

CSSのみでHTMLを変更する必要がないソリューション

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

推奨クラスdropdown-menu-rightを最後の要素に常に追加できるとは限らない、動的に生成されるメニューに特に便利です。

.dropdown-pull-right次のcssでクラスを使用できます。

.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>

Bootstrap 4では、.dropleftを使用できます

に変更してください：

<span class="dropleft">

または

.dropdown-menu- {lg、med、sm、xs} -rightをドロップダウンメニューに追加します

<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 Bootstrap 4用

* = xs、sm、md、lg

SOレベルが低すぎるため、コメントを残すことはできませんが、親コンテナーが "overflow：hidden"に設定されていることを確認しました（位置も設定されていることを確認してください）。

<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>