gpt4 book ai didi

jquery - Bootstrap Navbar 折叠按钮在点击时不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 10:41:48 25 4
gpt4 key购买 nike

我是 bootstrap 的新手。我试图玩弄这个例子。出于某种原因,当我减小屏幕大小时, 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;
}

最佳答案

data-target=".navbar-brand-centered" 替换为 data-target="#navbar-brand-centered"。您需要# 来引用一个id, 引用一个类。

关于jquery - Bootstrap Navbar 折叠按钮在点击时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35737875/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com