下拉菜单的bootstrap定位

Question

我正在使用bootstrap创建响应式网站。

当浏览器窗口变窄时，列应该会崩溃。

问题是，当我点击标题时，我想要显示下拉列表。

我已将菜单定位为绝对，因此我可以将z-index置于上方。

全宽，看起来很好：

当列堆叠时，菜单被推到左侧

如何将菜单放在居中的菜单标题文本下方？我能想到的一种方法是将下拉菜单的位置设置为标题文本的x y位置。这是唯一的方法吗？

<div class="col-md-1">
    <div id="heading_practice">                     
        <a href="#">
            <h4>Practice Areas</h4>
        </a>
        <div class="menu_practice">
            <p>test</p>
            <p>test2</p>
        </div>
    </div>
</div>
<div class="col-md-1">  
    <div id="heading_about">
        <a href="#">
            <h4>About Us</h4>
        </a>
        <div class="menu_about">
            <p>test</p>
            <p>test2</p>
            <p>test3</p>
        </div>
    </div>
</div>

CSS

/*Menu*/
#home, #heading_practice, #heading_about, #heading_contact {
    position: relative;
    text-align:center;
}

.menu_practice, .menu_about, .menu_contact {
    position: absolute;
    padding: 10px;
    border: thin solid Silver;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    z-index: 1;
    margin-left:20px;
    text-align:left;
}

Answer 1

如果您正在使用Bootstrap，那么为什么不使用Bootstrap-Dropdowns？

http://getbootstrap.com/components/#dropdowns

看起来你似乎正在那里建立一个导航栏，Bootstrap已经集成了以及对Dropdown的良好工作支持：

http://getbootstrap.com/components/#navbar