为什么一旦屏幕分辨率很小，我的导航栏就不会折叠？答案

【问题标题】：Why my navbar is not collapsing once the screen res is small?为什么一旦屏幕分辨率很小，我的导航栏就不会折叠？
【发布时间】：2015-02-28 04:53:52
【问题描述】：

我有一个引导导航栏，我试图在较小的屏幕上获取折叠菜单，但是一旦屏幕变小，菜单就会消失，您唯一能看到的就是导航栏品牌。

a codepen

这是我的代码

<nav class="navbar navbar-fixed-top capilleira-navbar ng-cloak"
     role="navigation"
     ng-controller="MenuController"
     ng-show="displayLogout">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#/lines"><img src="/images/logos/logo.png" alt=""></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a class="hover-nieve" href="#/lines">Sports <span class="sr-only">(current)</span></a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Poker</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Casino</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Horses</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Info</a></li>
      </ul>
      <div class="navbar-form navbar-right">
        <div class="form-group">
          <input id="search-box" ng-change="broadcastSearchBar()"
                 type="search"
                 ng-model="search"
                 class="search-box"
                 placeholder="Search lines..."/>
          <label for="search-box">
            <span class="glyphicon glyphicon-search search-icon"
                  ng-show="!search.length"></span>
            <span class="glyphicon glyphicon-remove search-icon blue-icon"
                  ng-show="search.length"
                  ng-click="search = ''; broadcastSearchBar()"></span>
          </label>
        </div>
        <div class="form-group">
          <div class="sideborders"></div>
          <button type="button" class="btn btn-blue" title="Account Figures"
                  data-placement="bottom"
                  data-template="views/accFiguresModal.html" data-animation="fx-bounce-down"
                  ng-controller="AccountFiguresCtrl" ng-click="displayAccountFigures();"
                  bs-popover data-auto-close="true">Account Figures
          </button>
          <button type="button" class="btn btn-red" title="Are you sure?" data-placement="bottom"
                  data-template="views/logoutModal.html"
                  data-animation="fx-bounce-down" data-auto-close="1" bs-popover>Log out
                  <i class="fa fa-sign-out fa-lg"></i>
          </button>
        </div>
      </div>
    </div>
  </div><!--/.navbar-collapse -->
</nav>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

菜单折叠并出现“汉堡图标”，唯一的问题是它完全是白色的，因此结果是不可见的。试着把它添加到你的 CSS 中，最后，你就会明白我的意思了：

span.icon-bar { background-color: red; }

希望这会有所帮助。

【讨论】：

实际上这是错误的，我无法通过在我的 css 中添加它来看到它，你能告诉我在我所做的 codepen 中吗？
codepen.io/anon/pen/pvKmQp 显然，您必须缩小窗口才能看到它。

【解决方案2】：

您的标记和代码笔存在各种问题..

您已经给了navbar 2 id= 属性。这行不通！
您通过添加 collapse 类隐藏了切换按钮
您没有在代码笔中包含 bootstrap.js，因此 data-toggle 将不起作用
默认情况下，切换按钮的图标栏是白色的，因此除非您的导航栏有背景色，否则它不会显示。

这是 Bootply http://bootply.com/26LXmNJFbq 上的修复（已包含 Bootstrap）

【讨论】：