Question

我有这个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，但不适用于任何情况谢谢！

Answer 1

默认情况下，这是Bootstrap可以执行的操作的一部分。它位于{{3>}下按钮下拉列表 - 下拉菜单

<div class="btn-group dropup">

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

我为你设置了一个小提琴docs。如果您移除顶部的<br>，您会看到菜单选项隐藏在输出框的顶部。

Answer 2

您可以旋转容器，并旋转其中的项目以显得正常:) 只是几行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;
}

fiddle

IMO是非常简单而优雅的解决方案，唯一的缺点是您必须使用transform或“ left”和important来覆盖Bootstrap在元素上的直接样式以调整打开的菜单

如何在对象上方渲染引导下拉列表？

2 个答案: