Bootstrap Navbar折叠按钮在单击时不起作用

Question

我是新手。 我试图尝试这个例子。 由于某些原因，当我减小屏幕尺寸时，引导导航栏菜单按钮不会响应单击。 我不确定自己在做什么错，我准备将头撞在墙上。 我觉得这与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 个解决方案

解决方案1
1 已采纳 2016-03-02 03:31:25

Bootstrap Navbar折叠按钮在单击时不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-02 03:31:25

解决方案1
1 已采纳 2016-03-02 03:31:25