Html Twitter bootstrap 下拉菜单超出屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13806802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap dropdown goes outside the screen
提问by pawel
I want to implement twitter bootstrap dropdown menu, here's my code:
我想实现 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>
Dropdown works good, my dropdown is placed next to right edge of the screen and when I click my dropdown-toggle, the list goes outside the screen. It looks like on the screen:
下拉效果很好，我的下拉菜单位于屏幕的右边缘，当我单击下拉开关时，列表会出现在屏幕之外。它在屏幕上看起来像：
How can i fix it?
我该如何解决？
回答by Ross
adding .pull-rightto ul.dropdown-menushould do it
添加.pull-right到ul.dropdown-menu应该这样做
Deprecation Notice:As of Bootstrap v3.1.0,
.pull-righton dropdown menus is deprecated. To right-align a menu, use.dropdown-menu-right.
弃用通知：从 Bootstrap v3.1.0 开始，不推荐使用
.pull-right下拉菜单。要右对齐菜单，请使用。.dropdown-menu-right
回答by krzychu
回答by praj
For Bootstrap 4, adding dropdown-menu-rightworks. Here's a working example..
对于 Bootstrap 4，添加dropdown-menu-right作品。这是一个工作示例..
回答by GiorgosK
a solution that does not need modifying the HTML only the CSS is
一个不需要修改 HTML 只需要修改 CSS 的解决方案是
li.dropdown:last-child .dropdown-menu {
right: 0;
left: auto;
}
Its particularly usefull for dynamically generated menus where its not always possible to add the recommended class dropdown-menu-rightto the last element
它对于动态生成的菜单特别有用，因为它并不总是可以将推荐的类添加dropdown-menu-right到最后一个元素
回答by Mohan Dere
You can use class .dropdown-pull-rightwith following css:
您可以使用.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>回答by Dedy Setiawan
in Bootstrap 4 you can use .dropleft
在 Bootstrap 4 中你可以使用 .dropleft
just change to :
只需更改为：
<span class="dropleft">
<span class="dropleft">
or
或者
add .dropdown-menu-{lg,med,sm,xs}-right to your dropdown-menu
添加 .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>
回答by Jeremy Lynch
float-*-rightfor Bootstrap 4
float-*-right引导程序 4
*= xs, sm, md, lg
*= xs、sm、md、lg
回答by hackdotslashdotkill
I can't leave a comment because my SO level is too low, but I just made sure that the parent container is set to "overflow:hidden" like so (also make sure position is set).
我无法发表评论，因为我的 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>
