html – Bootstrap下拉菜单没有正确定位

前端之家收集整理的这篇文章主要介绍了html – Bootstrap下拉菜单没有正确定位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我使用CSS“text-align:center”在下拉菜单中放置一个引导下拉列表时,下拉菜单会出现在下拉菜单的原始非居中位置.下拉列表似乎不知道其触发按钮已被移动.

问题在这个jsfiddle中表示:

https://jsfiddle.net/dkent600/wyos4ukt

小提琴包含以下代码

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

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

解决方法

如果将类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>

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

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

或者,您也可以添加以下内容

Updated Example

.dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
原文链接:https://www.f2er.com/html/228076.html

猜你在找的HTML相关文章