Twitter bootstrap 下拉菜单出现在屏幕之外

Posted 2023-03-05

【中文标题】Twitter bootstrap 下拉菜单出现在屏幕之外

【英文标题】：Twitter bootstrap dropdown goes outside the screen

【发布时间】：2012-11-28 05:04:58

【问题描述】：

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

下拉菜单效果很好，我的下拉菜单位于屏幕右边缘旁边，当我单击下拉切换时，列表会出现在屏幕之外。它看起来像在屏幕上：

我该如何解决？

【问题讨论】：

这个问题的正确答案（对于 bootstrap >= v 3.2.0）在这里得到解决：***.com/questions/23654962/… by @cvrebert。

我相信您的代码缺少结束跨度标记：

【参考方案1】：

我最近遇到了这个问题，我通过将 display="dynamic" 添加到我的 ngbDropdown 来解决它（使用 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="[e-mail]"
              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>

【参考方案2】：

如果您使用的是 Bootstrap 5，根据文档：

下降： 通过将 .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>

【参考方案3】：

我无法发表评论，因为我的 SO 级别太低，但我只是确保将父容器设置为“溢出：隐藏”，就像这样（还要确保设置位置）。

<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>

【参考方案4】：

在 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>

【参考方案5】：

对于 Bootstrap 4，添加 dropdown-menu-right 有效。这是一个工作示例..

http://codeply.com/go/w2MJngNkDQ

【讨论】：

我尝试了所有其他答案，而这也是唯一对我有用的答案。我正在使用 Bootstrap v. 4.1.0。

【参考方案6】：

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

【参考方案7】：

一种不需要修改 html 只需要 CSS 的解决方案

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

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

【讨论】：

这是唯一适用于 bootstrap 4.0.0 的解决方案

【参考方案8】：

float-*-right 用于 Bootstrap 4

* = xs, sm, md, lg

【参考方案9】：

将.pull-right 添加到ul.dropdown-menu 应该可以做到这一点

弃用通知： 自 Bootstrap v3.1.0 起，下拉菜单上的 .pull-right 为 deprecated。要右对齐菜单，请使用.dropdown-menu-right。

【讨论】：

这是一个完全独立的问题

如果用户使用的是一些较小的屏幕设备，这个答案实际上并不能解决问题——它是从左侧而不是右侧（实际上你只是改变了 pull-left拉到右边）。

查看 krzychu 答案，因为 Bootstrap.pull-right 已弃用

@HristoEnev 我也是。你的下拉菜单离开按钮了吗？

对于 Boostrap v5.0，它是 .dropdown-menu-end 而不是 .dropdown-menu-right getbootstrap.com/docs/5.0/components/dropdowns/…

【参考方案10】：

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

【讨论】：

即使使用最新的引导程序 .pull-right 对我也有效，而 .dropdown-menu-right 什么也没做。

这在 Bootstrap 4 中确实有效，除了你将类 .dropdown-menu-right 添加到 div.dropdown-menu （不是 ul）

<ul class="dropdown-menu dropdown-menu-right"> 在 4.1.1 上为我工作