Twitter bootstrap下拉列表显示在屏幕之外

Question

我想实现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>

null

下拉列表工作良好，我的下拉列表被放置在屏幕的右边缘旁边，当我单击下拉列表切换时，列表就会出现在屏幕之外。屏幕上看起来是这样的：

我该怎么修好它？

Answer 1

将.pull-right添加到ul.dropdown-menu中就可以了

不推荐使用通知：从Bootstrap V3.1.0开始，下拉菜单上的.pull-right是不推荐使用的。若要右对齐菜单，请使用.Dropdown-Menu-Right。