当我将引导下拉列表放置在使用 CSS“text-align: center”将下拉列表居中的 div 中时,下拉菜单出现在下拉列表的原始非居中位置。下拉菜单似乎不知道它的触发按钮已被移动。
这个问题在这个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;
}
对我来说(使用 bootstrap 5),实际上是因为我在输入中遗漏了
.dropdown
类,而不是相反(这就是公认的答案)。
希望这对其他人有帮助。