Bootstrap 4 のドロップダウンメニューが機能しないのはなぜですか?-CSSチュートリアル-php.cn

Bootstrap 4 のドロップダウンメニューが機能しないのはなぜですか?

Barbara Streisand

リリース： 2024-11-18 01:10:01

オリジナル

264 人が閲覧しました

Why is my Bootstrap 4 Dropdown Menu Not Working?

Bootstrap 4 ドロップダウンメニューが機能しないのはなぜですか?

問題:

あなたドロップダウンメニューの公式 Bootstrap 4 サンプルを実装しましたが、クリックしても表示されません。

考えられる解決策:

次のことを確認してください:

必要なファイルを含める:
- jQuery、Popper.js、および Bootstrap.js が正しい順序で組み込まれていることを確認してください。
コンソールでエラーを確認します:
- ブラウザコンソールにエラーや警告がないか調べます。
要素 ID の確認:
- ドロップダウントグル (dropdown01) とドロップダウンメニュー (aria-labelledby="dropdown01") の ID 属性を確認してください。 ) match.

特定の問題の解決策:

不足している Popper.js: Popper.js が存在しないとこの問題が発生する可能性があることが報告されています。 Popper.js が含まれており、適切に動作していることを確認してください。
古いブートストラップバージョン: 最新バージョンの Bootstrap 4 を使用していることを確認してください。古いバージョンではこの動作が発生する可能性があります。

作業例:

以下は、Bootstrap 4 ドロップダウンメニューの完全に機能する例です:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">

ログイン後にコピー

以上がBootstrap 4 のドロップダウンメニューが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。