Bootstrap导航栏崩溃在移动设备上不起作用

如果我调整浏览器的大小，它将很好地工作，但是如果我从手机/平板电脑访问它，则会加载未折叠的桌面版本，并且这样做不正确。

我的HTML有任何问题吗？

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
        <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand page-scroll" href="/">
        <i class="fa fa-car"></i>  <span class="light">Title</span>
      </a>
    </div>

    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
      <ul class="nav navbar-nav">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这里也有相关的样式...

    .navbar-custom {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  text-transform: uppercase;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  @media(max-width: $screen-xs-max) {
    background-color: #000;
  }
}

.navbar-custom .navbar-brand {
  font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
  outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
  padding: 4px 6px;
  font-size: 16px;
  color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
  outline: 0;
}

.navbar-custom a {
  color: darken(#fff, 20%);
}

.navbar-custom .nav li a {
  -webkit-transition: background .3s ease-in-out;
  -moz-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
  outline: 0;
  color: rgba(255,255,255,.8);
  background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
  outline: 0;
  background-color: transparent;
}

.navbar-custom .nav li.active {
  outline: 0;
}

.navbar-custom .nav li.active a {
  background-color: rgba(255,255,255,.3);
}

.navbar-custom .nav li.active a:hover {
  color: #fff;
}

@media(min-width:768px) {
  .navbar-custom {
    padding: 20px 0;
    border-bottom: 0;
    letter-spacing: 1px;
    background: 0 0;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
  }

  .navbar-custom.top-nav-collapse {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    background: url('home/wood2.jpg') no-repeat center center fixed;  }
}

我在导轨4上使用bootstrap-sass，如果有什么用的话。

谢谢！