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;
}

你说的汉堡按钮是这个吗？为什么在我这里chrome宽度调到最小也还能显示呢……唯一与你的不同的是，我本地没有bootstrap文件，用的CDN

<link href="https//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet">

【热门文章】