引导程序导航栏折叠按钮无法在点击上工作

问题描述：

我是新手引导程序。我正在试着玩这个例子。出于某种原因，当我缩小屏幕大小时，引导程序导航栏菜单按钮不响应点击。我不确定我做错了什么，我准备将我的头靠在墙上。我觉得它与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; 
}

}

你可以尝试把它放到像codepen这样的东西上吗？让别人更容易实验吗？ –

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

答

更换data-target=".navbar-brand-centered"与data-target="#navbar-brand-centered"。你需要#来引用一个id，.引用一个类。

太棒了......就是这样......我不相信我忽视了这么小的东西！ thanksss！ –

引导程序导航栏折叠按钮无法在点击上工作

相关推荐