Bootstrap 3折叠导航栏切换无法正常工作

时间：2018-02-27 02:24:23

标签： html css twitter-bootstrap twitter-bootstrap-3 navbar

我目前正在使用Bootstrap开发一个网站。我已经制作了一个自定义导航栏，它的设计略带CSS。由于我已经将CSS添加到我的导航栏中，因此在崩溃时它不再想要打开。我已经在我的代码中搜索了一整天，但无法找到问题所在。当我检查元素导航栏并单击按钮进行切换时，类会从导航栏切换更改为导航栏切换折叠，因此它正在执行某些操作，但不是＆＃ 39;在屏幕上显示它。

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

这段代码是您打破导航的地方：

.navbar-items {
    display: none;
}

删除它并导航将起作用。

答案 1 :(得分：0)

  

删除css代码   .navbar-items {           display：none;       }

＆＃13;
＆＃13; 
@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;
    }
}


.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题