为什么下拉菜单项不显示?
P粉304704653
P粉304704653 2023-09-12 15:22:22
0
1
613

我的导航栏使用 Bootstrap 5。问题是用户图标的下拉项(登录)未显示。这是我的代码:

<button class="btn dropdown-toggle" type="button" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa-solid fa-user text-white fs-5"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">Login</a>
            </div>

P粉304704653
P粉304704653

全部回复(1)
P粉546257913

对于 Boostrap 5,您需要 data-bs-toggle="dropdown" 而不是 data-toggle

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    
<button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa-solid fa-user text-white fs-5"></i>
</button>            
            
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
    <a class="dropdown-item" href="#">Login</a>
</div> 
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板