27

我有这个 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>

我已经尝试过，position:absolute; top:50px但不适用于任何情况。
谢谢！

4

2 回答 2

61

这是默认情况下 Bootstrap 可以做的一部分。它在Button Dropdowns - Dropup menus下的文档中

<div class="btn-group dropup">

由于它是绝对定位的，因此您需要在按钮上方留出一些空间，以便您可以看到下拉菜单，所以我不会在页面顶部使用它。

我在这里为你准备了一个小提琴。如果删除<br>顶部的 ，您会看到菜单选项隐藏在输出框的顶部。

于 2013-09-18T16:09:26.110 回答
0

您可以旋转容器，然后旋转里面的项目以使其看起来正常:) 它只是几行 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 其非常简单和优雅的解决方案，唯一的缺点是您必须使用变换或“左”important来覆盖 Bootstrap 在元素上的直接样式以调整打开的菜单

于 2020-04-30T14:33:06.217 回答