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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Barbara Streisand

Nov 18, 2024 am 01:10 AM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。