当窗口调整到足够小时会出现切换按钮，但按下按钮时什么也不做。我检查了 html 几次并确保 Bootstrap 文件正确上传但仍然无济于事。
还有一种方法可以更改切换按钮的父断点，使其显示为导航栏链接相对快速地挤压，因为它们太大了。
@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;
}
}
预览
关于jquery - Bootstrap 折叠导航栏切换不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54024503/