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>

下拉工作正常,我的下拉列表放在屏幕的右边缘旁边,当我点击我的下拉菜单切换时,列表会移出屏幕.它看起来像在屏幕上:

我该如何解决？

Answer 1

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

弃用注意事项:从Bootstrap v3.1.0开始,不推荐使用.pull-right下拉菜单.要右对齐菜单,请使用..dropdown-menu-right

Answer 2

由于.pull-right在下拉菜单中不推荐使用Bootstrap v3.1.0 .一个.dropdown-menu-right应该被添加到ul.dropdown-menu代替.文件

Answer 3

对于Bootstrap 4,添加dropdown-menu-right工作.这是一个有效的例子..

http://codeply.com/go/w2MJngNkDQ

Answer 4

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

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

它对于动态生成的菜单特别有用,因为它并不总是可以将推荐的类添加dropdown-menu-right到最后一个元素

Answer 5

您可以使用.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>