Twitter引导下拉菜单超出屏幕范围

我想实现twitter bootstrap下拉菜单，这是我的代码：

<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，下拉菜单中不建议添加。一个.dropdown-menu-right应该被添加到ul.dropdown-menu代替。文件

对于Bootstrap 4，添加dropdown-menu-right工程。这是一个工作示例。

http://codeply.com/go/w2MJngNkDQ

一个不需要修改HTML的解决方案，只需CSS

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

它对于动态生成的菜单特别有用，在这种情况下，并非总是可能将推荐的类添加dropdown-menu-right到最后一个元素

您可以将class .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}-添加到您的下拉菜单中

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