Html bootstrap 下拉气泡右对齐(不是右推)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18892351/
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
bootstrap dropdown bubble align right (not push-right)
提问by no0ne
I have cart in my top menu, using push-right
and my problem is that the dropdown bubble falls out of the page. I am trying to align the bubble right, so that it right-aligns with 'click'
我的顶部菜单中有购物车,使用时push-right
我的问题是下拉气泡从页面中掉出来。我正在尝试将气泡对齐,以便它与“单击”右对齐
like this
像这样
HTML:
HTML:
<div class="cart pull-right">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
<div class="dropdown-menu">
STUFF
</div>
</li>
</ul>
</div>
回答by meetri
Bootstrap 3.1+
引导程序 3.1+
Adding the class .dropdown-menu-right to the same div containing the class dropdown-menu:
将类 .dropdown-menu-right 添加到包含类下拉菜单的同一个 div:
<div class="dropdown-menu dropdown-menu-right">
STUFF
</div>
http://getbootstrap.com/components/#dropdowns-alignment
http://getbootstrap.com/components/#dropdowns-alignment
Bootstrap 2.3 & 3.0
引导程序 2.3 和 3.0
Add the class .pull-right to the same div containing the class dropdown-menu
将类 .pull-right 添加到包含类下拉菜单的同一个 div
<div class="dropdown-menu pull-right">
STUFF
</div>
This seems to work for me using bootstrap 3.0
这似乎对我使用 bootstrap 3.0 有用
回答by Jaspreet Singh
This can be solved with the bootstrap class dropdown-menu-right
with dropdown-menu
that is specifically for this problem that uses the css properties right: 0;
and left: auto;
to right align it.
这可以通过引导类来解决dropdown-menu-right
与dropdown-menu
这是专为使用的CSS属性这个问题right: 0;
,并left: auto;
以正确的对齐。
This solution is working for me.
这个解决方案对我有用。
Source - http://getbootstrap.com/components/#btn-dropdowns-dropup(go to developer tools for this)
来源 - http://getbootstrap.com/components/#btn-dropdowns-dropup(为此转到开发人员工具)
回答by Georgi Peev
<div class="dropdown-menu dropdown-menu-right">
This is still working in boostrap 4.2.1 :)
这仍然适用于 boostrap 4.2.1 :)
回答by Coding Enthusiast
回答by no0ne
ok got it!
好的,我知道了!
position:relative;left:0
on <ul class="dropdown-menu">
position:relative;left:0
在 <ul class="dropdown-menu">