Bootstrap navbar-fixed-top doens不需要點擊打開

我正在玩Bootsrap。這裏是我的htmlBootstrap navbar-fixed-top doens不需要點擊打開

</!DOCTYPE html> 
<html> 
<head> 
    <title>JQuery</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif|Montserrat' rel='stylesheet' type='text/css'> 
</head> 
<body> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      <a class="navbar-brand" href="#" id="logo">MyPortfolio</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right" id="menu"> 
       <li class="active text-uppercase"><a href="#">services</a></li> 
       <li class="text-uppercase"><a href="#">portfolio</a></li> 
       <li class="text-uppercase"><a href="#">about</a></li> 
       <li class="text-uppercase"><a href="#">team</a></li> 
       <li class="text-uppercase"><a href="#">contact</a></li> 
      </ul> 
     </div>  
    </div> 
    </nav> 

<div id="top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 intro-pre-heading">Welcome To My Website!</div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-12 intro-heading">it's nice to meet you</div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 text-center"><a href="#" class="btn btn-lg btn-warning">TELL ME MORE</a></div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

和css：

*{ 
    color: white; 
    font-family: 'Montserrat', sans-serif; 
} 
#logo{ 
    color:#FED136; 
    font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive; 
    font-size: 2em; 
    margin: 10px 5px 10px 30px; 
} 
#menu{ 
    margin: 10px 30px 10px 0; 
} 
#menu li{ 
    margin:0 15px; 
} 
div#top{ 
    margin-top: 70px; 
    background-color: black; 
    background: url('http://blackrockdigital.github.io/startbootstrap-agency/img/header-bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: 100% 100%; 
     height: 600px; 
} 
.intro-heading{ 
    font-family: 'Montserrat', sans-serif; 
    text-transform: uppercase; 
    text-align: center; 
    font-weight: bold; 
    font-size: 70px; 
} 
.intro-pre-heading{ 
    margin-top: 110px; 
    font-family: 'Droid Serif', serif; 
    font-style: italic; 
    text-align: center; 
    font-size: 40px; 
} 

.btn-warning { 
    font-size:40px!important; 
    margin-top: 60px; 
    background-color: #FED136 !important; 
    border-background:#FED136; 
}

但導航欄切換按鈕不會打開。我無法弄清楚代碼中有什麼問題。我在這裏看到類似的問題，並嘗試了不同的方法，但他們都沒有解決我的問題

來源

2016-07-22 kurumkan

你的錯誤是你忘了包括引導js文件。還要確保jquery js已加載。以下是完整的工作代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <title>JQuery</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif|Montserrat' rel='stylesheet' type='text/css'> 
    <style> 
    *{ 
    color: white; 
    font-family: 'Montserrat', sans-serif; 
     } 
     #logo{ 
     color:#FED136; 
     font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive; 
     font-size: 2em; 
     margin: 10px 5px 10px 30px; 
     } 
     #menu{ 
     margin: 10px 30px 10px 0; 
     } 
     #menu li{ 
     margin:0 15px; 
     } 
     div#top{ 
     margin-top: 70px; 
     background-color: black; 
     background: url('http://blackrockdigital.github.io/startbootstrap-agency/img/header-bg.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: 100% 100%; 
     height: 600px; 
     } 
     .intro-heading{ 
     font-family: 'Montserrat', sans-serif; 
     text-transform: uppercase; 
     text-align: center; 
     font-weight: bold; 
     font-size: 70px; 
     } 
     .intro-pre-heading{ 
     margin-top: 110px; 
     font-family: 'Droid Serif', serif; 
     font-style: italic; 
     text-align: center; 
     font-size: 40px; 
     } 

     .btn-warning { 
     font-size:40px!important; 
     margin-top: 60px; 
     background-color: #FED136 !important; 
     border-background:#FED136; 
     } 
    </style> 
</head> 
<body> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      <a class="navbar-brand" href="#" id="logo">MyPortfolio</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right" id="menu"> 
       <li class="active text-uppercase"><a href="#">services</a></li> 
       <li class="text-uppercase"><a href="#">portfolio</a></li> 
       <li class="text-uppercase"><a href="#">about</a></li> 
       <li class="text-uppercase"><a href="#">team</a></li> 
       <li class="text-uppercase"><a href="#">contact</a></li> 
      </ul> 
     </div>  
    </div> 
    </nav> 

<div id="top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 intro-pre-heading">Welcome To My Website!</div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-12 intro-heading">it's nice to meet you</div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 text-center"><a href="#" class="btn btn-lg btn-warning">TELL ME MORE</a></div> 
     </div> 
    </div> 
</div> 

</body> 
</html

來源

2016-07-22 17:42:18 Faiz

它的作品！謝謝！ – kurumkan

Bootstrap navbar-fixed-top doens不需要點擊打開

回答

相關問題