Bootstrap 的下拉列表出了屏幕

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

我该怎么补救？

71346 次浏览
小开
最佳答案

把 .pull-right加到 ul.dropdown-menu就可以了

不推荐注意: 在 Bootstrap v3.1.0中，下拉菜单上的 .pull-right是 不赞成。

不推荐注意2: 在 Bootstrap v5中，不推荐使用 .dropdown-menu-right。

小开

由于在下拉菜单中不推荐使用 Bootstrap v3.1.0添加 .pull-right。应该在 ul.dropdown-menu中添加 .dropdown-menu-right

小开

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

小开

引导程序4的 float-*-right

* = xs，sm，md，lg

小开

不需要修改 HTML 的解决方案，只需要修改 CSS 即可

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

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

小开

对于 Bootstrap 4，添加 dropdown-menu-right是可行的。

Http://codeply.com/go/w2mjngnkdq

小开

在 Bootstrap 4中你可以使用.dropleft

换成:

<span class="dropleft">

或者

下拉菜单-{ lg，med，sm，xs }-右转到您的下拉菜单

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

我不能留下注释，因为我的 SO 级别太低了，但我只是确保父容器被设置为“ overflow: hide”，就像这样(还要确保位置被设置)。

<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，根据文档:

德罗普赖特: 通过在父元素中添加. droend 来触发元素右侧的下拉菜单。

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

我最近遇到了这个问题，我通过在 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>


提交答案