引导下拉内部按钮

Question

我试图在我的页面中间创建一个下拉菜单。我按照指南将它居中，但是下拉菜单一直被放在按钮中。

代码如下:

<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" id="timezoneDropdown" data-bs-toggle="dropdown"
aria-expanded="false">
What timezone are you in?
</button>
<ul class="dropdown-menu" aria-labelledby="timezoneDropdown">
<li><button class="dropdown-item">GMT</button></li>
<li><button class="dropdown-item">UTC</button></li>
<li><button class="dropdown-item">ECT</button></li>
<li><button class="dropdown-item">EET</button></li>
<li><button class="dropdown-item">ART</button></li>
<li><button class="dropdown-item">EAT</button></li>
</ul>
</div>

Answer 1

我使用了你的代码，它作为一个下拉菜单完全完美地工作，因为它应该。我在btn-group周围添加了一个包装器，以获得您提到的居中.....

<div class="d-flex justify-content-center">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" id="timezoneDropdown" data-bs-toggle="dropdown"
aria-expanded="false">
What timezone are you in?
</button>
<ul class="dropdown-menu" aria-labelledby="timezoneDropdown">
<li><button class="dropdown-item">GMT</button></li>
<li><button class="dropdown-item">UTC</button></li>
<li><button class="dropdown-item">ECT</button></li>
<li><button class="dropdown-item">EET</button></li>
<li><button class="dropdown-item">ART</button></li>
<li><button class="dropdown-item">EAT</button></li>
</ul>
</div>
</div>