2016-11-11 69 views
0

我無法獲得移動下拉這個導航欄,我需要的所有文件的工作,但它仍然不會允許任何產品下拉(移動視圖?)引導移動下拉

有什麼事我失蹤,我不能看到

<div class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="navbar-main"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/" style="background-color: lightgrey;">Site</a> 
    </div> 
     <div class="navbar-collapse collapse" id="navbar-main"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Site</a> 
       </li> 
       <li><a href="#">Rules</a> 
       </li> 
       <li><a href="#">Results</a> 
       </li> 
       <li><a href="#">Contact</a> 
       </li> 
       <li><a href="#">Request Account</a> 
       </li> 
      </ul> 
      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
        <input type="text" class="form-control" name="username" placeholder="Username"> 
       </div> 
       <div class="form-group"> 
        <input type="password" class="form-control" name="password" placeholder="Password"> 
       </div> 
       <button type="submit" class="btn btn-default">Sign In</button> 
      </form> 
     </div> 

</div> 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Site</title> 


     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 


     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
     <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 

    </head> 
    <body> 
    @include('layouts.header') 

    @include('layouts.footer') 

    </body> 
</html> 
+0

你有[檢查你的錯誤控制檯?(http://stackoverflow.com/documentation/javascript/185/getting-started-with-javascript/714/using-console-log)確認您在加載Bootstrap之前加載jQuery *。 –

+0

您可以創建[Bootply](http://www.bootply.com/)嗎? –

+2

** _Bootstrap.js_和'data-target =「navbar-main」'應該是'data-target =「#navbar-main」'(add#)之前的_jQuery_需要**。 – vanburen

回答

2

你只是缺少#data-target值。 CodePen

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">