我目前正在使用 Bootstrap 开发一个网站。我制作了一个自定义导航栏，它使用 CSS 进行了轻微的样式化。因为我已经将 CSS 添加到我的导航栏中，所以它在折叠时不想再打开了。我整天都在我的代码中搜索，但找不到问题所在。当我检查导航栏元素并单击按钮进行切换时，该类从 navbar-toggle 更改为 navbar-toggle collapsed，所以它正在做某事，但不是t 在屏幕上显示它。
@import url('https://fonts.googleapis.com/css?family=Bree+Serif');
@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
background: #f3f3f3;
}
.customfont{
font-family: 'Bree Serif', serif;
}
.bold{
font-weight: bold;
color: #999;
}
div.target{
display: block;
height: auto;
border-radius: 6.666px;
background: #ffffff;
}
.progress {
text-align: center;
width: 100%;
border-radius: 5px;
}
.progress-value {
font-family: arial-black;
position: absolute;
right: 0;
left: 0;
color: black;
}
p.afstand {
line-height: 50%;
}
a{
/*color: #FFFFFF;*/
text-decoration: none;
cursor: pointer;
}
/*a:hover{
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}*/
.coin-plus {
color: #1be061;
}
.coin-dip {
color: crimson;
}
.hover-coin-link:hover {
color: #1be061;
}
.progress-complete {
color: white;
}
.progress-bar {
background: #1be061;
width: 100%;
padding:15px 0;
}
.arial-black {
font-family: 'arial-black';
}
.font-weight-800 {
font-weight: 800;
}
.small-usd {
color: grey;
}
.secondary-color {
color: #053d66;
}
.progress {
height: 30px !important;
}
.grey-background {
background: #f3f3f3;
}
.white-background {
background: white !important;
}
.nav-main {
text-transform: uppercase;
}
.nav-main a {
color: #356e98
}
.toggle.btn[data-toggle='toggle'] {
float: right !important;
margin-left: 10px
}
@media (min-width: 1500px) {
.container {
width: 1075px;
}
}
.navbar .navbar-toggle .icon-bar {
background-color: black;
}
@media (max-width: 1300px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
max-height: 300px;
overflow-y: scroll!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
.navbar-logo {
padding-bottom: 20px;
}
.navbar-items {
display: none;
}
}
.panel-login {
border-color: #ccc;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.panel-login>.panel-heading {
color: #00415d;
background-color: #fff;
border-color: #fff;
text-align:center;
}
.panel-login>.panel-heading a{
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active{
color: #029f5b;
font-size: 18px;
}
.panel-login>.panel-heading hr{
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
height: 45px;
border: 1px solid #ddd;
font-size: 16px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
outline:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #ccc;
}
.btn-login {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
.btn-login:hover,
.btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}
.btn-register {
background-color: #1CB94E;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
color: #fff;
background-color: #1CA347;
border-color: #1CA347;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/addon.css">
<title>CC Targets</title>
</head>
<body>
<nav class="mb0 navbar navbar-static-top white-background navbar-logo pt20" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="secondary-color font-size-36">Super Signals</span></a>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-static-top white-background navbar-items" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 pl0">
<div class="collapse navbar-collapse nav-main" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Targets</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php if (!isset($_SESSION['name'])) { ?>
<li><a href="login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<?php } else { ?>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span><?php echo " " . $_SESSION['name'];?>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="overzicht">Overzicht</a></li>
<li><a href="logout">Log uit</a></li>
</ul>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="js/cookie.js"></script>
<script src="js/script.js"></script>
</body>
</html>最佳答案
这段代码是你破坏导航的地方:
.navbar-items {
display: none;
}
删除它，导航将起作用。
关于html - Bootstrap 3 折叠导航栏切换将不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49000136/