是什么导致这种力量在bootstrap下拉菜单上留下格式？

I have the following HTML code:

我有以下HTML代码：

<div style="text-align: center;">            
      <h2 class="bpcenter" style="color: white;">ONE</h2>        

    <div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Settings
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
</div>

which right now, is giving me this output:

现在，给我这个输出：

是什么导致这种力量在bootstrap下拉菜单上留下格式？ I'm using the standard bootstrap 3.3.2 css/js files, and I haven't modified anything in the css code for .dropdown or .dropdown>menu.

我正在使用标准的bootstrap 3.3.2 css / js文件，我没有在.dropdown或.dropdown>菜单的css代码中修改任何内容。

The button is centered, but the <ul> and its subsequent <li>s are justified left. I'm not sure why.

按钮居中，但

是左对齐的。我不知道为什么。
是左对齐的。我不知道为什么。

1 个解决方案

#1

The problem is that dropdown div expands to 100% width, and inner menu is positioned absolutely relatively to it and has left: 0.

问题是dropdown div扩展到100％宽度，内部菜单绝对相对于它并且已经离开：0。

You need to set your button as inline-block in this case menu will position properly:

您需要将按钮设置为内联块，在这种情况下菜单将正确定位：

<div class="dropdown drop-button">
    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Settings
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Action</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Another action</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Something else here</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</div>

CSS:

CSS：

.drop-button {
    display: inline-block;
}

Demo: http://plnkr.co/edit/07w4pjNVnjd7p71fGOCT?p=preview

演示：http：//plnkr.co/edit/07w4pjNVnjd7p71fGOCT？p = preview

#1