jquery - Bootstrap 切换按钮不起作用

Question

我有以下 html:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
    <div class="container-fluid" ng-controller="NaviController">
        <div class="row main-navi uppercase navilinks" >

            <div class="col-md-1 col-md-offset-1 col-xs-3 ">
                <div  id="logo-container">
                    <a href="#"><img id="logo" src="assets/images/logo.svg"> </a>
                </div>
            </div>
            <div class="col-md-1 col-xs-2 col-xs-offset-7">
                <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse"  data-target="#epic-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>
                </div>
            </div>
            <div class="col-md-6 col-md-offset-1 col-xs-offset-8 col-xs-4 navbar-collapse mainlinks"  id="epic-navbar-collapse">
            <ul id="mainlinks-container" >    
                <li class="white-shadow mainlink" ><a href="#about" data-target="about" id="about" ng-click="CollapseNavilinks()">About</a></li>
                <li class="mainlink"><a href="#values" data-target="values" id="values" ng-click="CollapseNavilinks()">Values</a></li>
                <li class="mainlink"><a href="#team" data-target="team" id="team" ng-click="CollapseNavilinks()">Team</a></li>
                <li class="mainlink"><a href="#portofolio" data-target="portfolio" id="portofolio" ng-click="CollapseNavilinks()">Portfolio</a></li>
                <li class="mainlink"><a href="#join" data-target="join" id="join" ng-click="CollapseNavilinks()">Join</a></li>
                <li class="mainlink"><a href="#contact" data-target="contact" id="contact" ng-click="CollapseNavilinks()">Contact</a></li>
            </ul>
            </div>
        </div>
    </div>
  </div>
</nav>

在 320x480、480x800、640x960 上一切正常。但是当宽度变大时，让我们说 768 按钮停止工作。

css 和 html 代码:http://jsfiddle.net/#&togetherjs=iqyQopTpQT

知道为什么会这样吗？

即使我尝试来自 bootstrap website 的示例在 768x1280 分辨率下，切换按钮出现，但当您单击它时，它不起作用。

Answer 1

查看 bootstrap.css 得到了这个:

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

我认为 .navbar-toggle 在 css 和 js 文件中有一些其他引用，使其只能在宽度 < 768 的浏览器中工作。

我刚刚尝试使用带有导航栏的官方网站的整个页面，这似乎有点奇怪，我只能看到切换按钮的浏览器宽度为 767 像素，而不是 768 像素。