Bootstrap 5 Navbar ドロップダウン: ドロップダウンが折りたたまれないのはなぜですか? どうすれば修正できますか?

Bootstrap 5 Navbar ドロップダウンの問題: 折りたたみ機能の解決

この説明では、Bootstrap を使用して応答性の高いメニューまたはドロップダウン ボタンを作成しようとするときに発生する課題について説明します5. 必要なナビゲーション アイコンとドロップダウン アイコンが組み込まれているにもかかわらず、ドロップダウン メニューは応答しないままです。さらに、作者は、mr-auto や ml-auto などの他の Bootstrap クラスでも問題に遭遇しました。

これらの問題の根本原因は、Bootstrap 4 から Bootstrap 5 への移行にあります。Bootstrap 5 では、重要な変更が導入されています。これには、すべての JavaScript プラグインの data- 属性の data-bs- 属性への置き換えが含まれます。この変更は、折りたたみ、Navbar、カルーセル、ドロップダウン、タブ、モーダルなどのさまざまな JavaScript コンポーネントに適用されます。

ドロップダウンの折りたたみの問題を解決するために、次のスニペットは正しい構文を示しています:

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

これにより、データ属性が Bootstrap 5 の規則に準拠することが保証されます。

さらに、Bootstrap 5 では、水平方向の配置を管理するための新しいクラス (ms-auto や me-auto など) が導入されており、以前に使用されていた ml-auto クラスや mr-auto クラスが置き換えられます。

以上がBootstrap 5 Navbar ドロップダウン: ドロップダウンが折りたたまれないのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。