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