当我使用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元素,则下拉菜单将正确定位.
<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; }
.dropdown { position: relative; display: inline-block; vertical-align: middle; }