CSS 如何在对象上方呈现引导程序下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18875457/
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
How to render bootstrap dropdown above the object?
提问by Alexandru R
I have this HTML which renders a bootstrap dropdown under the object. It is possible to make it apear above the Title button?
我有这个 HTML，它在对象下呈现一个引导程序下拉列表。可以让它出现在标题按钮上方吗？
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Title
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>Option 1</a></li>
<li class="dropdown-submenu"><a>Option 1</a></li>
(various number of <li>)
</ul>
</div>
I've tried with position:absolute; top:50pxbut doesn't work for any case.
Thanks!
我试过position:absolute; top:50px但不适用于任何情况。
谢谢！
回答by Joshua M
This is by default part of what Bootstrap can do. It's in the docsunder Button Dropdowns - Dropup menus
默认情况下，这是 Bootstrap 可以做的一部分。它位于Button Dropdowns - Dropup menus下的文档中
<div class="btn-group dropup">
As it's absolutely positioned, you will need to have some space above the button so you can see the drop up menu, so I wouldn't use it at the top of a page.
由于它是绝对定位的，因此您需要在按钮上方留出一些空间，以便您可以看到下拉菜单，因此我不会在页面顶部使用它。
I've set up a fiddle herefor you. If you remove the <br>at the top, you'll see that the menu options are hidden at the top of the output box.
我已经成立了一个小提琴在这里为您服务。如果删除<br>顶部的 ，您将看到菜单选项隐藏在输出框的顶部。
回答by Sergey Sob
you can rotate the container, and rotate the items inside to appear normal :) its just a few lines of css.
您可以旋转容器，并旋转里面的项目以显示正常:) 它只是几行 css。
css:
css：
.dropdown {
left: 40px;
top: 150px;
transform: rotate(180deg);
}
.dropdown a, .dropdown button {
transform: rotate(180deg);
}
.dropdown a {
padding: 5px 35px 5px 5px;
}
.dropdown-menu {
margin-left: -18px !important;
}
IMO its very simple and elegant solution, the only downside you will have to use transform or 'left' with importantto override Bootstrap's direct styling on the element to adjust the opened menu
IMO 其非常简单和优雅的解决方案，唯一的缺点是您必须使用转换或“左”important来覆盖 Bootstrap 在元素上的直接样式以调整打开的菜单
