Question

我很难尝试将下拉列表集中在一个按钮组中。该组正确居中，但下拉列表继续在左下角。

有人可以帮忙吗？

提前致谢！

Answer 1

也许你正在寻找类似的东西：Live demo (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作为选择器的原因;当然你需要首先解决它。）

了解updated fiddle的工作原理。

如何将Twitter Bootstrap中的下拉列表居中？

2 个答案: