2017-06-12 37 views
-1

當使屏幕變得更小時,當我點擊它時,導航切換按鈕不會顯示導航菜單。我絞盡腦汁解決這個問題,並認爲JavaScript不活躍。儘管如此,我仍然無法正常工作。引導3中的導航切換按鈕不會掉下來(Javascript問題?)

JQuery正在工作,並且已放置在JavaScript之前。 我試過了JS的網頁鏈接,但這似乎不起作用。 我試過移動我的文件夾中的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