twitter-bootstrap Bootstrap 下拉菜单位置不正确

Bootstrap dropdown menu does not position correctly

提问by Doug Kent

When I place a bootstrap dropdown inside a div that centers the dropdown using CSS "text-align: center", the dropdown menu appears in the original un-centered position of the dropdown. The dropdown doesn't seem to know that its triggering button has been moved.

当我使用 CSS“text-align:center”将引导下拉列表放置在使下拉列表居中的 div 中时，下拉菜单出现在下拉列表的原始未居中位置。下拉菜单似乎不知道它的触发按钮已被移动。

The issue is represented in this jsfiddle:

这个问题在这个jsfiddle中表示：

https://jsfiddle.net/dkent600/wyos4ukt

https://jsfiddle.net/dkent600/wyos4ukt

The fiddle contains the following code:

小提琴包含以下代码：

<div style="background-color:grey; text-align:center">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <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>
         </ul>
    </div>
</div>

Thanks for any clues for how to fix this.

感谢您提供有关如何解决此问题的任何线索。

回答by Josh Crozier

If you add the class btn-groupto the .dropdownelement, then the dropdown-menu will be positioned properly.

如果将类添加btn-group到.dropdown元素，则下拉菜单将正确定位。

Updated Exmple

更新示例

<div class="btn-group dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <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>

The reason this works is because the class adds the following CSS. In doing so, the dropdown-menu is positioned absolutely relativeto the parent element.

这样做的原因是因为该类添加了以下 CSS。这样做时，下拉菜单绝对相对于父元素定位。

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}

---

---

Alternatively, you could also add the following:

或者，您还可以添加以下内容：

Updated Example

更新示例

.dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}