Bootstrap 新手求助，自适应导航栏，当小屏幕时那个汉堡按钮无法显示出来，谢谢！
html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>GhostChina</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="app.css" rel="stylesheet">
</head>
<body>
<!--start header-->
<header class="main-header" style="background-image: url(http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg)">
<div class="container" >
<div class="row">
<div class="clo-sm-12">
<!--start logo-->
<a class="branding" href="http://www.nfchome.org" title="gohost china">
<img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png" alt="ghsot">
</a>
<!--end logo-->
</div>
</div>
</div>
</header>
<!--end header-->
<!-- start navigation -->
<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="menu">
<li class="nav-current" role="presentation"><a href="#">首页</a></li>
<li role="presentation"><a href="#">论坛</a></li>
<li role="presentation"><a href="#">快捷手册</a></li>
<li role="presentation"><a href="#">中文文档</a></li>
<li role="presentation"><a href="#">下载</a></li>
<li role="presentation"><a href="#">关于</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- end navigation -->
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
css文件
/*公共通用属性*/
html,body{
color: #505050;
line-height: 1.75em;
background: #ebebeb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*头部属性*/
.main-header{
text-align: center;
padding: 90px 0;
}
/*logo*/
.main-header .branding{
font-size: 3.5em;
color: #303030;
}
/*a链接默认属性*/
a {
color: #e67e22;
outline: none;
text-decoration: none;
}
/*不想图片自适应拉伸的话就是max-width:100%,想图片都统一拉升的话就用width:100%*/
.main-header .branding img{
max-width: 100%;
}
a:active,a:focus,a img{
outline: none;
}
.main-navigation{
text-align: center;
background: #ffffff;
border-top: 1px solid #ebebeb;
border-bottom: 3px solid #e1e1e1;
margin-bottom: 35px;
}
.main-navigation .menu{
padding: 0;
margin: 0;
}
.main-navigation .menu li.nav-current{
border-bottom: 3px solid #e67e22;
margin-bottom: -2px;
}
.main-navigation .menu li{
list-style: none;
display: inline-block;
position: relative;
}
.main-navigation .menu li a{
color: #505050;
line-height: 4em;
display: block;
padding: 0 21px;
}
.main-navigation button .icon-bar {
color:#059808;
text-align: center;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你说的 汉堡按钮 是这个吗？为什么在我这里chrome宽度调到最小也还能显示呢……唯一与你的不同的是，我本地没有bootstrap文件，用的CDN