2017-06-12 3 views
-1

画面を小さくすると、ナビゲーションボタンがクリックされてもナビゲーションメニューが表示されません。私はこれを解決するために頭を悩まし、JavaScriptがアクティブではないと思っています。それにもかかわらず、私はまだそれを適切に動作させることはできません。ブートストラップ3のナビゲーショントグルボタンがドロップダウンしない(JavaScriptの問題?)

JQueryが動作しJavaScriptの前に配置されています。 JSへのWebリンクを試しましたが、これはうまくいかないようです。 フォルダ内のJSファイルを移動しようとしましたが、もう一度動作しないようです。

コードは、以下のあなたの助けのための

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title>Bootstrap 101 Template</title> 

<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<style> 

.navbar-brand {font-size:180%;} 

.myImage {width:100%; 
     height:600px; 
     background-size:cover;} 

.background {background-color:black;} 

</style> 
</head> 
<body> 

<div class="navbar navbar-default"> 

<div class="container"> 

    <div class="navbar-header"> 

     <div class="navbar-brand"></div> 


     <!--Nav toggle button on mobile--> 

      <button class="navbar-toggle" 
        data-toggle="collapse" 
        datatarget=".navbar-collapse"> 

       <span class="sr-only">Toggle navigation</span> 

       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 

      </button> 

    </div>  

      <div class="collapse navbar-collapse"> 

       <ul class="nav navbar-nav"> 

        <li class="active"><a href="">Home</a> 
        <li class=""><a href="">About</a> 
        <li class=""><a href="">Download</a> 

       </ul> 

        <!--log in section--> 

       <form class="navbar-form navbar-right"> 

        <div class="form-group"> 

         <input type="email" 
           placeholder="Email" 
           class="form-control"> 
        </div> 

        <div class="form-group"> 

         <input type="password" 
           placeholder="Password" 
           class="form-control"> 

        </div> 

      <button type="button" class="btn btn-success">Log In</button> 

       </form> 
      </div> 

</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

おかげです。あなたは、データ・ターゲットのタイプミス作った

答えて

0

<button class="navbar-toggle" 
     data-toggle="collapse" 
     datatarget=".navbar-collapse"> 

を代わりに、それは次のようになります。

<button class="navbar-toggle" 
     data-toggle="collapse" 
     data-target=".navbar-collapse"> 
+0

私は、今日の悪夢を持つおかげで非常に多くのよ! – KUBIX

関連する問題