jquery - Bootstrap折叠导航栏切换不起作用
问题描述
当窗口的大小调整到足够小的时候,切换按钮就会出现,但是当按下按钮时,它什么也不做。我检查了 html 几次,并确保引导文件正确上传,但仍然无济于事。
还有一种方法可以更改切换按钮的父断点,使其显示为导航栏链接,因为它们很大,所以相对较快地挤压起来。
@charset "UTF-8";
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
font-size: 1.5vmin;
font-family: 'brandon grotesque'
}
.button {
display: inline-block;
border: solid white 2px;
margin-top: 25px;
-moz-transition: color .5s ease-in;
-o-transition: color .5s ease-in;
-webkit-transition: color .5s ease-in;
background-color: transparent;
color: white;
text-decoration: none;
padding: 2px;
}
.button:hover {
background-color: white;
color: black;
text-decoration: none;
transition-timing-function: ease-in-out;
}
#logo {
height: 50px;
}
.navbar {
min-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
@media (min-width: 768px) {
.navbar-nav>li>a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
<html>
<head>
<title>MASSERIA ELYSIUM</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar"></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">DINING</a></li>
<li><a href="#">LOCATION</a></li>
<li><a href="#">ACCOMODATION</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
<a class="button" href="#">BOOK NOW</a>
</ul>
</div>
</div>
</nav>
</body>
</html>
我对 html 编码很陌生,所以请帮助我:)
解决方案
你已经添加了navbar-collapse
两次,主要的是一个空的<div>
。替换以下内容:
<div class="collapse navbar-collapse" id="myNavbar"></div>
<div class="collapse navbar-collapse">
具有以下内容:
<div class="collapse navbar-collapse" id="myNavbar">
删除一次,你就可以开始工作了:
@charset "UTF-8";
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
font-size: 1.5vmin;
font-family: 'brandon grotesque'
}
.button {
display: inline-block;
border: solid white 2px;
margin-top: 25px;
-moz-transition: color .5s ease-in;
-o-transition: color .5s ease-in;
-webkit-transition: color .5s ease-in;
background-color: transparent;
color: white;
text-decoration: none;
padding: 2px;
}
.button:hover {
background-color: white;
color: black;
text-decoration: none;
transition-timing-function: ease-in-out;
}
#logo {
height: 50px;
}
.navbar {
min-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
@media (min-width: 768px) {
.navbar-nav>li>a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
@media screen and (max-width: 767px) {
.navbar-nav.navbar-center {
position: static;
color: #fff;
transform: none;
font-size: 1em;
}
}
<html>
<head>
<title>MASSERIA ELYSIUM</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-center">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">DINING</a></li>
<li><a href="#">LOCATION</a></li>
<li><a href="#">ACCOMODATION</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
<a class="button" href="#">BOOK NOW</a>
</ul>
</div>
</div>
</nav>
</body>
</html>
对于您的第二个问题:
.navbar-nav.navbar-center {
position: absolute;
}
在较小设备的媒体查询中删除它并删除转换。
@media screen and (max-width: 767px) {
.navbar-nav.navbar-center {
position: static;
transform: none;
font-size: 1em;
}
}
预习
推荐阅读
- batch-processing - 如何使用 avisynth 源批量编码 hevc 视频?
- python - 为什么 numpy.datetime64 会给出一个年份数组的错误?
- ibm-cloud - 在 IBM Cloud 中,Node-Red 流未与 2 个实例一起显示
- python - 如何使用 sklearn 在直方图中拟合核密度图?
- python-3.x - 以 10 为基数的 int() 的无效文字是什么:“无”
- javascript - 使用 javascript 创建 Discord 机器人,但出现问题
- ruby-on-rails - 未使用 RestClient/HTTParty 身份验证参数
- apache-spark - Spark 的哪一部分将失败的任务返回到不同的节点?
- c# - 在托管服务中访问上下文
- laravel - Laravel - 内核是如何创建的?