一.响应式导航
.logo {
padding:0;
}
#myCarousel {
margin: 50px 0 0 0; //轮播图和导航不会重叠
}
#navbar-collapse ul {
margin-top:0;
}
.carousel-inner img {
margin: 0 auto; //让轮播器的图片自动居中
}
.carousel-control {
font-size: 100px;
}
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企训网"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
//大屏时隐藏,缩小时显示
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
//响应式导航,缩小时消失
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
</ul>
</div>
</div>
</nav>