ドロップダウンメニューは表示されません

私はboostrap.min 4と3を私のコードに入れましたが、それでもコンパイルはできません。私はブートストラップ4の公式ページに行って、指示に従いましたが、運は助けてください。ドロップダウンメニューは表示されません

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

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

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 
    <body> 


<h1>Welcome home</h1> 
<div class="dropdown show"> 
    <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Dropdown link 
    </a> 

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
</div> 

    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <script src="/main.js"></script> 

</body> 
</html>

出典

2017-06-20 Tech Tron

ブートストラップ3または4のどちらかを使用する必要がありますが、どちらも同じページには行っていません。また、v4を使用している場合、現在のバージョンはv4.0.0-alpha.6です（alpha.2スタイルシート/ cssとalpha.6 javascript/jsを使用しています）。これらのファイルとして一貫したバージョンを使用する必要があります共に働く。 v4サイトのドキュメントはalpha.6に関連しています。 – Patrick

<html> 
 
    <head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
<h1>Welcome home</h1> 
 
<div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Link 
 
    <span class="caret"></span></button> 
 
\t <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 
</html>

これを試してみてください、それはあなたが必要なものにあなたが近づくかもしれません。ブートストラップW3チュートリアルからは、あなたの実装とは少し異なるフォーマットのメニュー構造があります。あなたはとても近くにいるように見えます！ https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

出典

2017-06-20 19:24:08 Aquaballin

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

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</head> 
<body> 
    <h1>Welcome home</h1> 
    <div class="dropdown show"> 
    <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     Dropdown link 
    </a> 

    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 
     <a class="dropdown-item" href="#">Action</a> 
     <a class="dropdown-item" href="#">Another action</a> 
     <a class="dropdown-item" href="#">Something else here</a> 
    </div> 
    </div> 
</body> 
</html>

Hey！だから、一般的にファイルの<head>コンポーネントですべてのファイルインポートを行うのが最善です。また、.cssファイルを呼び出す方法にいくつかの問題があったため、コードはそれを気に入らなかった。あなたのコードはここにあります！

その他ご質問がある場合はお知らせください。

出典

2017-06-20 19:28:43

また、オフラインで作業できるように、ソースファイルをダウンロードしてみてください。それは確かにインターネット、ハハなしで動作することができないうんざりする。運が良かった！ –

これは機能します。私のコードをコピーしてください。

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

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    </head> 
    <body> 

    <h1>Hello, world!</h1> 
    <div class="dropdown"> 
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     Dropdown button 
     </button> 
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
     <a class="dropdown-item" href="#">Action</a> 
     <a class="dropdown-item" href="#">Another action</a> 
     <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
    </div> 

    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    </body> 
</html>

出典

2017-06-20 19:30:58

ドロップダウンメニューは表示されません

答えて

関連する問題