Question

我正在尝试使用中心图像上的Bootstrap下拉列表，但我也无法将下拉列表置于中心位置。

<div class="row">
    <div class="col-md-12 profile-picture text-center">
        <div class="dropdown col-md-3">
            <img src="http://i.imgur.com/9qfJGrz.jpg" alt="" class="profile-photo img-thumbnail" data-toggle="dropdown" />
            <ul class="dropdown-menu" role="menu" aria-labelledby="Change Settings">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Upload new picture</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove</a></li>
            </ul>
        </div>
    </div>
</div>

正如您所看到的下拉列表左侧对齐，有没有办法让它在图像下方居中？它位于col-md-3中，因此请尝试调整屏幕大小。

Answer 1

在您的下拉列表中添加display：inline-block。

.dropdown
{
    display: inline-block;
}

这里是fiddle.

Answer 2

查看更新的fiddle

这将是一个解决方案，只要您声明菜单的宽度，它就会起作用：

.profile-photo {
  width: 170px;
  height: 170px;
  margin: 0 auto;
  display: block;
}

.dropdown-menu {
  margin-left: -85px;
  width: 170px;
  left: 50%;
  position: absolute;    
}

我删除了您的col-md-3，因为您只是使用此方法将菜单放在col-md-12的中间位置。

Answer 3

position: absolute，left:0px和float:left是原因。

修正：

.profile-picture .dropdown-menu {
    position: relative;
    clear: both;
    float: none;
}

宽度将坚持列的宽度：）

如果您不喜欢，请使用这些，或删除列设置：

width: 170px;
margin: 0 auto;

在居中的图像上使用Bootstrap下拉列表

3 个答案: