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

将 .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。

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

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

http://codeply.com/go/w2MJngNkDQ

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

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

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

您可以将 .dropdown-pull-right 类与以下 css 一起使用：

.dropdown-pull-right { 浮动：对！重要；右：0；左：自动； } .dropdown-pull-right>.dropdown-menu { 右：0;左：自动； }

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

float-*-right 用于引导程序 4

* = xs, sm, md, lg

我无法发表评论，因为我的 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>

如果您使用的是 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>

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