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添加.pull-right应该这样做
弃用声明：自Bootstrap v3.1.0起， 不推荐使用下拉菜单中的
.pull-right。 要使菜单右alignment，请使用.dropdown-menu-right。
由于Bootstrap v3.1.0在下拉菜单中不推荐使用.pull-right 。 一个.dropdown-menu-right应该被添加到ul.dropdown-menu 。 文件
你可以使用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="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>
一个解决scheme，不需要修改HTML只有CSS是
li.dropdown:last-child .dropdown-menu { right: 0; left: auto; }
它特别适用于dynamic生成的菜单，其中并不总是可以将推荐的类dropdown-menu-right到最后一个元素
float-*-right适用于Bootstrap 4
* = xs，sm，md，lg
