首页 文章

Twitter引导下拉列表超出了屏幕

提问于
浏览 次
127

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

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

enter image description here

我该如何解决？

html css twitter-bootstrap

6 回答

  • 225

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

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

    回复于
  • 107

    由于Bootstrap v3.1.0在下拉菜单中不推荐添加 .pull-right . 应将 .dropdown-menu-right 添加到 ul.dropdown-menu . Docs

    回复于
  • 9

    您可以使用以下css类.dropdown-pull-right：

    .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>
    回复于
  • 7

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

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

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

    回复于
  • 1

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

    http://codeply.com/go/w2MJngNkDQ

    回复于
  • 8

    float-*-right for Bootstrap 4

    * = xs，sm，md，lg

    回复于

相关问题