时间戳

首页 > 解决方案 > 按钮内的引导下拉菜单

html - 按钮内的引导下拉菜单

问题描述

我正在尝试在页面中间创建一个下拉菜单。我按照指南将其居中，但下拉菜单一直放在按钮中。

这是代码：

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

标签： htmlcssbootstrap-5

解决方案

我使用了您的代码，它完全可以作为下拉菜单完美运行。我在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>

推荐阅读