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

Question

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

下拉效果很好，我的下拉菜单位于屏幕的右边缘旁边，当我单击我的下拉开关时，列表超出了屏幕。它看起来像在屏幕上：

我该如何解决？

原文由 pawel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加 .pull-right 到 ul.dropdown-menu 应该这样做

弃用通知： 从 Bootstrap v3.1.0 开始，下拉菜单上的 .pull-right 已 弃用。要右对齐菜单，请使用 .dropdown-menu-right 。

弃用通知 2： 从 Bootstrap v5 开始， .dropdown-menu-right 已弃用。对于 Bootstrap v5，使用 .dropdown-menu-end 。

原文由 Ross 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于 Bootstrap v3.1.0 添加 .pull-right 在下拉菜单中被弃用。应将 .dropdown-menu-right 添加到 ul.dropdown-menu 中。 文档

原文由 krzychu 发布，翻译遵循 CC BY-SA 3.0 许可协议