Question

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

}

Answer 1

将data-target=".navbar-brand-centered"替换为data-target="#navbar-brand-centered"。您需要#来引用ID，.指的是一个类。

Bootstrap Navbar折叠按钮无法单击

1 个答案: