如何正确对齐Bootstrap下拉列表？

Question

我知道我可以使用text-align: center CSS样式将Bootstrap下拉元素置于中心位置。这会根据需要将下拉菜单集中在一起。但是，当我单击菜单将其激活并显示项目列表时，它将与父div的左侧对齐。我想让下拉菜单的左边缘与您单击以激活它的按钮的左边缘齐平（就像下拉列表默认情况下左下方对齐一样）。这可能吗？

This is a JSFiddle that demonstrates the issue I'm having.

Answer 1

出现此问题是因为.dropdown-menu绝对定位（left: 0）到仍然采用全宽的父容器。您可以为div.dropdown设置固定宽度（103px就像下拉按钮一样）并添加margin: 0 auto，因为如果不这样做，您的按钮将不再居中。

<强> CSS

.dropdown{
    width:103px;
    margin:0 auto;
}

<强> Fiddle

Answer 2

您可以按如下方式更改dropdown课程

.dropdown{ margin: 0 auto; display: table; }

如果您不想为元素设置特定宽度。

Answer 3

使用margin-left代替text-align:center。它会起作用。