如何在对象上渲染bootstrap下拉菜单？
如何在对象上渲染bootstrap下拉菜单？
提问于 2013-09-18 22:47:52
我有这个HTML，它在对象下呈现一个bootstrap下拉菜单。可以让它出现在标题按钮的上方吗？
<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>我尝试过使用position:absolute; top:50px，但在任何情况下都不起作用。
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-19 00:09:26
默认情况下，这是Bootstrap所能做的一部分。它在docs中的按钮下拉菜单下拉菜单下
<div class="btn-group dropup">因为它是绝对定位的，所以你需要在按钮上方留出一些空间，这样你才能看到下拉菜单，所以我不会在页面顶部使用它。
我已经为你设置了一个小提琴here。如果删除顶部的<br>，您将看到菜单选项隐藏在输出框的顶部。
Stack Overflow用户
发布于 2020-04-30 22:33:06
您可以旋转容器，并旋转其中的项目以显示正常:)它只有几行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;
}在它非常简单和优雅的解决方案中，唯一的缺点是你必须使用transform或'left‘与important一起覆盖Bootstrap在元素上的直接样式来调整打开的菜单
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18875457
复制相关文章
相似问题
腾讯云开发者
