Warum werden die Dropdown-Menüelemente nicht angezeigt?

Question

Ich verwende Bootstrap 5 für meine Navigationsleiste. Das Problem besteht darin, dass das Dropdown-Element für das Benutzersymbol (Anmeldung) nicht angezeigt wird. Das ist mein Code:

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

Answer 1

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