css - 如何在 Twitterbootstrap 中将下拉菜单居中？

Question

我很难将由组中的按钮切换的下拉菜单居中。该组正确居中，但下拉菜单继续在左角。

这是一个例子。

有人可以帮忙吗？

提前致谢！

Answer 1

也许您正在寻找类似的东西：现场演示（jsfiddle）

.centered {
    text-align: center;
}
.centered .dropdown {
    display: inline-block;
    min-width: 500px; /* Needs to be big enough for the menu to be centered in it */
}
.centered .dropdown.open .dropdown-menu {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

<div class="centered">
    <div class="dropdown">
        <a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
        Dropdown
        <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">c</a></li>
        </ul>
    </div>
</div>

编辑完成CSS

Answer 2

如果您想将您的div.dropdown内部居中另一个div这样做：

#dropdown1 {
    width: 183px;
    margin: 0 auto;
}​

它的缺点是您需要知道要居中的元素的确切宽度（这就是我使用 id 作为选择器的原因；当然您需要先设置它）。

看看它在你更新的 fiddle上是如何工作的。