css - 是什么导致这种力量在 Bootstrap 下拉菜单中留下格式？

Question

我有以下 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>        

现在，正在给我这个输出:

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

按钮居中，但是 <ul>及其后续<li> s 左对齐。我不确定为什么。

Answer 1

问题是下拉 div 扩展到 100% 宽度，内部菜单相对于它绝对定位并且有 left: 0。

您需要将按钮设置为 inline-block 在这种情况下菜单将正确定位:

<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:

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

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