CSS Bootstrap下拉定位

Question

我在定位引导下拉元素时遇到问题。我在列表项目中有下拉式锚点和菜单，旁边有缩略图和一些文本（也在锚点内）：

<div class="panel-list">
    <ul>

        <li class="panel-list-item">

            <div class="pull-right panel-list-option">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                    <i class="fa fa-ellipsis-v" ></i>
                </a>

                <ul class="dropdown-menu">
                    <li><a href="/user/profile">Profile</a></li>
                    <li class="dropdown-header">3</li>
                    <li class="divider"></li>
                    <li><a href="/user/logout">Logout</a></li>
                </ul>
            </div>

            <a href="#m">

                <div class="pull-left">
                    <img class="panel-list-option-img"
                         src="http://blogs-images.forbes.com/tomiogeron/files/2012/10/Stripe-logo.jpeg"
                         height="30" width="30">

                </div>

                <div class="col-xs-10">
                    <h1>Stripe</h1>
                    <p class="description">Payment Processing for Developers</p>
                </div>
            </a>

        </li>
    </ul>
</div>

但是，下拉列表会显示在div下方的位置，如下图所示：

CSS：

.panel-list ul{
    margin:0;
    padding:0;
}
.panel-list-item>a{
    overflow:hidden;
    padding:10px 10px 0 10px;
    background-color:#fff;
    display:block;
    color:#888;
}


.panel-list-option a {
    position:relative;
    display:block;
    padding:10px;
}

.panel-list-option ul{
    display:absolute;
    z-index:1;
    float:right;
}

这样做的最佳方式是什么？

Answer 1

你错过了触发器+菜单周围的.dropdown类 - 它应该是：

<div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    <!-- Menu HTML .. -->
</div>

此类需要相对于其触发器定位下拉菜单（<a>)。来自docs：

  

将下拉列表的触发器和下拉菜单包裹在.dropdown中，或者另一个声明position：relative;的元素。然后添加菜单的HTML。