html - Bootstrap navbar-collapsed 缩小后不保留背景

Question

.normal {
height: 75px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.normal .navbar-right {
padding-top: 12px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}




@media (max-width: 767px) {
    .navbar{height: auto;}
    .navbar-brand{
    height: auto;}
    
}
.navbar-collapse{
border: 0px;

}
.navbar-brand {
padding: 0px !important;
}
.navbar-brand img {
max-height: 75px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.shrink {
height: 50px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.shrink .navbar-right {
padding-top: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.shrink .navbar-brand img {
max-height: 50px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
body {
min-height: 2000px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top normal" role="navigation">
		  <div class="container">
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed button-middle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand" href="#"><img src="http://placehold.it/150x70" /></a>
			</div>
			<div class="navbar-collapse collapse">
			  </ul>
			  <ul class="nav navbar-nav navbar-right">
				<li><a href="../navbar/">Default</a></li>
				<li><a href="../navbar-static-top/">Static top</a></li>
				<li><a href="./">Fixed top</a></li>
			  </ul>
			</div><!--/.nav-collapse -->
		  </div>
		</nav>

使用 .navbar{height: auto;} 我修复了在滚动前丢失 navbar-collapsed 背景的背景问题。问题是在滚动后导航栏收缩时修复导航栏折叠背景问题，因为干扰导航栏后的内容...

Answer 1

固定的height: 50px;需要从css .shrink类中删除