Bootstrap 5 のナビゲーション バーのドロップダウン メニュー (折りたたみ) に機能上の問題があります。
P粉322319601
2023-08-22 20:42:45
<p><code>Bootstrap 5</code> を使用してレスポンシブ メニューまたはドロップダウン ボタンを作成しようとしたときに問題が発生しました。すべて順調のようです。ナビゲーション アイコンとドロップダウン アイコンが表示されます。しかし、それらは機能しません。 <code>ナビゲーション</code> アイコンまたは <code>ドロップダウン</code> ボタンをクリックしても、<code>ドロップダウン メニュー</code> が表示されません。 </p>
<p><code>jquery</code> ファイルもインクルードしたことを特に述べておきたいと思います。しかし、うまくいきませんでした。ここで何が起こっているのか誰か教えてもらえますか？ </p>
<p>最後にもう 1 つ、他の <code>bootstrap</code> クラス (<code>mr-auto</code>、<code>ml-auto</code> など) を使用しています。 . ) で重大な問題が発生しました。これはバグですか? それとも <code>bootstrap 5</code> はこの種の仕事を行うための新しいクラスを導入していますか? </p>
<p><strong>これが私のコードです: </strong></p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width、initial-scale=1.0" />
<title>ブートストラップ</title>
<リンク
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="スタイルシート"
integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
クロスオリジン=「匿名」
/>
</head>
<本体>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<a href="#" class="navbar-brand">デモテック</a>
<ボタン
class="ナビゲーションバートグラー"
data-toggle="折りたたむ"
data-target="#ナビゲーションバー"
>
<span class="navbar-toggler-icon"></span>
</ボタン>
<div class="navbar-collapse 折りたたみ" id="navbar" ナビゲーションバー>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">ホーム</a></li>
<li class="nav-item"><a href="#" class="nav-link">概要</a></li>
<li class="nav-item"><a href="#" class="nav-link">連絡先</a></li>
</ul>
</div>
</ナビ>
<スクリプト
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
整合性 = "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
クロスオリジン=「匿名」
></スクリプト>
</ボディ>
</html></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Bootstrap 5 では、Bootstrap 4 で使用されていた data-*
ドキュメント属性がdata-bs-*に置き換えられました。 リーリー ＃＃＃＃＃＃デモ＃＃＃＃＃＃で説明したように、すべての JavaScript プラグイン データ属性は、ブートストラップ機能をサードパーティや独自のコードと区別しやすくするために名前空間が設定されるようになりました。これは、JavaScript コンポーネント (折りたたみ、ナビゲーションバー、カルーセル、ドロップダウン、タブ、モーダルなど) は data-bs-... 属性のみを使用できることを意味します。
Bootstrap 5 は、重大な変更を含む メジャー アップデート
、です。さらに、こちらをご覧くださいml-auto/mr-auto は ms-auto/me-auto に変更されました。
。