ドロップダウンメニューが完全に機能していません（bootstrap4.0）

ブートストラップベータ版4.0を使用して簡単なドロップダウンメニューを作成しようとしています。私が使用しているのは、ブートストラップのドキュメントにあるオリジナルのコードだけです。このコードには、ブートストラップが機能するために必要なcdnsが含まれています。また、jqueryも実装されています。これが起こっている理由を見つけることができません。助けてください。前もって感謝します。あなたは、ブートストラップCDN（コンテンツ配信ネットワーク）を含むように持っていて、また、jQueryのを含める必要がありますドロップダウンメニューが完全に機能していません（bootstrap4.0）

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 

 

 

 
    <!--Fontawsome--> 
 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <div class="dropdown"> 
 
     <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us</button> 
 
     <div class="dropdown-menu" aria-labelledby="about-us"> 
 
     <a class="dropdown-item" href="#">Our Story</a> 
 
     <a class="dropdown-item" href="#">Our Team</a> 
 
     <div class="dropdown-divider"></div> 
 
     <a class="dropdown-item" href="#">Contact Us</a> 
 
     </div> 
 
    </div> 
 
    </header> 
 
    <!--Jquery--> 
 

 
    <script src="js/jquery-3.2.1.min.js"></script> 
 
    <!--Bootstrap Script--> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 

 

 
    <!-- Mod Script --> 
 

 
</body> 
 

 
</html>

出典

2017-11-13 user3043324

。

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

出典

2017-11-13 16:22:57

をブートストラップする必要がありeコードを入力する必要があります。しかし、それは応答しません。 – user3043324

あなたは、私が目を追加したようBootstrap 4 document

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

にneceesry CDN Sを含め、4 CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 

 
    <!--Fontawsome--> 
 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <div class="dropdown"> 
 
     <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us</button> 
 
     <div class="dropdown-menu" aria-labelledby="about-us"> 
 
     <a class="dropdown-item" href="#">Our Story</a> 
 
     <a class="dropdown-item" href="#">Our Team</a> 
 
     <div class="dropdown-divider"></div> 
 
     <a class="dropdown-item" href="#">Contact Us</a> 
 
     </div> 
 
    </div> 
 
    </header> 
 
    <!--Jquery--> 
 

 
    <script src="js/jquery-3.2.1.min.js"></script> 
 
    <!--Bootstrap Script--> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 

 

 
    <!-- Mod Script --> 
 

 
</body> 
 

 
</html>

出典

2017-11-13 16:25:56 AVI

もし私がすでに私のコードでこれらを実装しているのであれば、よく見てください。私はプロッパーのjsリンクを追加しましたが、依然として反応しません。あなたの助けをありがとう。 – user3043324

応答性を意味しますか？あなたは完全なナビゲーションバーを意味しますか？または単にドロップダウンmednu？ – AVI

ドロップダウンメニュー。 – user3043324

ドロップダウンメニューが完全に機能していません（bootstrap4.0）

答えて

関連する問題