如何在对象上方呈现自举下拉菜单? [英] How to render bootstrap dropdown above the object?

问题描述

我有这个HTML，可在该对象下呈现一个引导程序下拉列表.是否可以使其显示在标题"按钮上方?

I have this HTML which renders a bootstrap dropdown under the object. It is possible to make it apear above the Title button?

<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，但在任何情况下均不起作用.
谢谢！

I've tried with position:absolute; top:50px but doesn't work for any case.
Thanks!

推荐答案

默认情况下，这是Bootstrap可以执行的操作.在按钮下拉菜单-下拉菜单下的文档中

This is by default part of what Bootstrap can do. It's in the docs under 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.

我在此处设置了小提琴.如果删除顶部的<br>，则会看到菜单选项隐藏在输出框的顶部.

I've set up a fiddle here for 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.

这篇关于如何在对象上方呈现自举下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！