Bootstrap 5 の Navbar ドロップダウンの問題
Bootstrap 5 を使用して応答性の高いナビゲーション メニューを?qū)g裝しようとすると、ドロップダウン ボタンが表示されなくなる問題が発生する可能性があります。またはメニュー項目が意図したとおりに機能しません。この問題は、jQuery がプロジェクトに含まれている場合でも発生する可能性があります。
原因
Bootstrap 5 では、JavaScript プラグインの data-* 屬性が変更されました。以前は data-toggle と data-target が使用されていましたが、Bootstrap 5 では、それぞれ data-bs-toggle と data-bs-target に置き換えられました。
Solution
問題を解決するには、古い data- 屬性を新しい data-bs- に置き換えます。屬性:
<button>
追加の考慮事項
data-* 屬性の変更に加えて、Bootstrap 5 では他の変更も導(dǎo)入されています。たとえば、ml-auto クラスと mr-auto クラスは、ms-auto と me-auto に置き換えられています。
デモ
このコード スニペットは、機能するドロップダウンを示しています。ボタン:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav>以上がjQuery を使用しても Bootstrap 5 のナビゲーションバー ドロップダウンが機能しないのはなぜですか?の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。