引導程序導航欄摺疊按鈕無法在點擊上工作

我是新手引導程序。我正在試着玩這個例子。出於某種原因，當我縮小屏幕大小時，引導程序導航欄菜單按鈕不響應點擊。我不確定我做錯了什麼，我準備將我的頭靠在牆上。我覺得它與jquery/bootstrap腳本文件的位置有關，但我也仔細檢查了它們。附上我的HTML和CSS代碼。請讓我知道是否需要其他信息。由於引導程序導航欄摺疊按鈕無法在點擊上工作

HTML

`<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link href="../Content/bootstrap.min.css" rel="stylesheet" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
    <link href="../Content/app.css" rel="stylesheet" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  

    <title></title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-brand-centered"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <div class="navbar-brand navbar-brand-centered">Home</div> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="navbar-collapse collapse" id="navbar-brand-centered"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

</body> 
</html> 
`

CSS

@media screen and (min-width:768px){ 
.navbar-brand-centered { 
    position: absolute; 
    left: 50%; 
    display: block; 
    width: 160px; 
    text-align: center; 
    background-color: #eee; 
} 
.navbar>.container .navbar-brand-centered, 
.navbar>.container-fluid .navbar-brand-centered { 
    margin-left: -80px; 
}

}

來源

2016-03-02 HereToLearn_

你可以嘗試把它放到像codepen這樣的東西上嗎？讓別人更容易實驗嗎？ –

@MattWanchap我得到了我的答案。請看下面 –

更換data-target=".navbar-brand-centered"與data-target="#navbar-brand-centered"。你需要#來引用一個id，.引用一個類。

來源

2016-03-02 03:31:25 joshhunt

太棒了......就是這樣......我不相信我忽視了這麼小的東西！ thanksss！ –

引導程序導航欄摺疊按鈕無法在點擊上工作

回答

相關問題