bootstrap navbar collapse展开后合不上

Question

从某模板copy了一个导航栏，小屏幕下collapse，点击后展开，二次点击就合不上了。
刚开始没问题，后来不知道改了哪就出现了这个问题。
js文件都引用了，求解答。
HTML代码如下：

<header id="header" class="header">
    <div class="container">
        <h1 class="logo pull-left">
             <a class="scrollto" href="index.html">
                 <span class="logo-title">
                 <img src="img/logo-white.png" />
                 </span>
              </a>
         </h1>
<!--//logo-->
    <nav id="main-nav" class="main-nav navbar-right" role="navigation">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" 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>
            <!--//nav-toggle-->
        </div>
        <!--//navbar-header-->
        <div class="navbar-collapse collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active nav-item"><a class="scrollto" href="index.html">主页</a></li>
                <li class="nav-item"><a class="scrollto" href="project.html">项目介绍</a></li>
                <li class="nav-item"><a class="scrollto" href="download.html">APP下载</a></li>
                <li class="nav-item last"><a class="scrollto" href="contact.html">联系我们</a></li>
            </ul>
            <!--//nav-->
        </div>
        <!--//navabr-collapse-->
    </nav>
    <!--//main-nav-->
</div>
</header>

CSS代码如下，基本都是定义颜色什么的

.header {
  padding: 10px 0;
  background: #4299d6;
  color: #fff;
  position: fixed;
  width: 100%;
}
.header .logo {
  margin: 0;
  padding-top: 10px;
}

.header .main-nav button {
  background: #4299d6;
  color: #fff !important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.header .main-nav button:focus {
  outline: none;
}
.header .main-nav button .icon-bar {
  background-color: #fff;
}
.header .main-nav .navbar-collapse {
    padding: 0;
}

.header .main-nav .nav .nav-item {
    font-weight: normal;
    margin-right: 46px;
}

.header .main-nav .nav .nav-item.active a {
    color: #dbdada;
    background: none;
}

.header .main-nav .nav .nav-item a {
    color: #fff;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    font-size: 16px;
    padding: 15px 10px;
}

.header .main-nav .nav .nav-item a:hover {
    color: #fff;
    background: none;
}

.header .main-nav .nav .nav-item a:focus {
    outline: none;
    background: none;
}

.header .main-nav .nav .nav-item a:active {
    outline: none;
    background: none;
}

.header .main-nav .nav .nav-item.active {
    color: #dbdada;
}

.header .main-nav .nav .nav-item.last {
    margin-right: 0;
}

Answer 1

你好,你可以看看我这篇文章能否帮你解决问题
http://lyjnc.me/2016/05/27/boostrap%E5%88%9D%E4%BD%93%E9%AA%8C/