自举下拉泡对齐右(不推右)

我有在我的顶部菜单购物车，使用 push-right和我的问题是，下拉式泡沫脱落的页面。我正试图将泡泡对齐到正确的位置，以便它与“点击”对齐到正确的位置

像这样

enter image description here

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>
83717 次浏览
小开

ok got it!

position:relative;left:0 on <ul class="dropdown-menu">

小开
最佳答案

Bootstrap 5+ (Update June 2022)

dropdown-menu-right has been replaced with dropdown-menu-end

<div class="dropdown-menu dropdown-menu-end">
STUFF
</div>

https://getbootstrap.com/docs/5.2/components/dropdowns/#menu-alignment

Bootstrap 3.1+

Adding the class .dropdown-menu-right to the same div containing the class dropdown-menu:

<div class="dropdown-menu dropdown-menu-right">
STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 & 3.0

Add the class .pull-right to the same div containing the class dropdown-menu

<div class="dropdown-menu pull-right">
STUFF
</div>

This seems to work for me using bootstrap 3.0

小开

in bootstrap v 3.1.0 the answer to this question is different.

jsfiddle

<div class="dropdown-menu pull-menu-right">
STUFF
</div>
小开

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.

This solution is working for me.

Source - http://getbootstrap.com/components/#btn-dropdowns-dropup (go to developer tools for this)

小开 
<div class="dropdown-menu dropdown-menu-right">

This is still working in boostrap 4.2.1 :)


提交答案