logo标签列表

Twitter Bootstrap下拉菜单超出屏幕

htmlcsstwitter-bootstrap
163

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

下拉菜单运作良好，我的下拉菜单位于屏幕右侧边缘，当我点击下拉菜单开关时，列表会超出屏幕。 在屏幕上看起来像这样：

输入图像描述

我该如何修复它？

这个问题的正确答案（适用于bootstrap版本>= 3.2.0）已由@cvrebert在 https://dev59.com/_WAg5IYBdhLWcg3wYqF0 中解决。 - Michahell
我认为你的代码缺少一个结束的span标签：</span> - stealthysnacks
10个回答
290
将 .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。

29
那是一个完全独立的问题。 - Dewayne
17
如果用户使用较小的屏幕设备，这个答案并不能真正解决问题——它会向左侧移动而不是右侧（实际上只需将“pull-left”改为“pull-right”）。 - Anonymous
6
请参考krzychu的答案，Bootstrap.pull-right已经被废弃了。 - Jeroen
1
@HristoEnev 我也是。你的下拉菜单是否偏离了按钮？ - Choylton B. Higginbottom
1
在 Bootstrap v5.0 中，使用 .dropdown-menu-end 替代 .dropdown-menu-right。 - Dinaraj
118
自 Bootstrap v3.1.0 起，在下拉菜单中添加 .pull-right 已经不再推荐使用。 应该在 ul.dropdown-menu 中添加 .dropdown-menu-right 。文档
10
即使使用最新的Bootstrap，.pull-right对我仍然有效，而.dropdown-menu-right则没有任何作用。 - Shane Grant
这在Bootstrap 4中确实有效，只需将类.dropdown-menu-right添加到div.dropdown-menu（而不是ul）即可。 - Timothy Kanski
2
<ul class="dropdown-menu dropdown-menu-right"> 在4.1.1上对我有效。 - dw1
27
1
我尝试了所有其他答案，但只有这个对我有效。我正在使用Bootstrap v. 4.1.0。 - Zeth
22
一个不需要修改HTML，仅需要修改CSS的解决方案。
li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

这对于动态生成菜单特别有用，因为无法始终将推荐的类dropdown-menu-right添加到最后一个元素中。

2
这是唯一适用于Bootstrap 4.0.0的解决方案。 - charsi
12

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

3
在Bootstrap 4中，您可以使用.dropleft类。只需更改为：<span class="dropleft"> 或者将.dropdown-menu-{lg,med,sm,xs}-right添加到您的下拉菜单中。
<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>
2

float-*-right 在Bootstrap 4中的使用

* = xs, sm, md, lg

0

我最近遇到了这个问题，通过在我的ngbDropdown中添加display="dynamic"（使用Angular 12、ngBootstrap 10和Bootstrap 4），我解决了它:

<div class="row">
  <div class="col">
    <div ngbDropdown display="dynamic" class="d-inline-block dropdown-menu-right">
      <button class="btn btn-outline-primary" id="navbarDropdownForm" ngbDropdownToggle>Sign in</button>
      <div ngbDropdownMenu aria-labelledby="navbarDropdownForm">
        <form class="px-4 py-3">
          <div class="form-group">
            <label for="navbarDropdownFormEmail">Email address</label>
            <input type="email" class="form-control" id="navbarDropdownFormEmail" placeholder="email@example.com"
              autocomplete="username">
          </div>
          <div class="form-group">
            <label for="navbarDropdownFormPassword">Password</label>
            <input type="password" class="form-control" id="navbarDropdownFormPassword" placeholder="Password"
              autocomplete="current-password">
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="dropdownCheck">
            <label class="form-check-label" for="dropdownCheck">
              Remember me
            </label>
          </div>
          <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <button ngbDropdownItem>New around here? Sign up</button>
        <button ngbDropdownItem>Forgot password?</button>
      </div>
    </div>
  </div>
</div>

0

我无法留下评论，因为我的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>
0
如果您正在使用Bootstrap 5，根据文档：

Dropright： 通过将.dropend添加到父元素，可以在元素的右侧触发下拉菜单。

<div class="btn-group dropend">
 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  Dropright
 </button>
 <ul class="dropdown-menu">
  <!-- Dropdown menu links -->
 </ul>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接