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

时间:2015-08-30 18:25:33

标签: css twitter-bootstrap

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

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

3 个答案:

答案 0 :(得分:1)

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

<强> CSS

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

<强> Fiddle

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:0)

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