Question

我有一个bootstrap导航栏，我试图在较小的屏幕上显示折叠菜单，但是一旦屏幕很小，菜单就会消失，你可以看到的唯一东西是navbar-brand。

这里是我的代码

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

Answer 1

菜单崩溃，＆＃34;汉堡包图标＆＃34;显示，唯一的问题是它完全是白色的，因此结果是不可见的。尝试将此添加到您的CSS，最后，所以你看到我的意思：

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

希望这会有所帮助。

Answer 2

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

您已经提供了navbar 2个id =属性。这不起作用！
您通过添加collapse类
您的codepen中未包含bootstrap.js，因此data-toggle将无效
默认情况下，切换按钮的图标栏为白色，因此除非您的导航栏具有背景颜色，否则它不会显示。

以下是Bootply http://bootply.com/26LXmNJFbq的修复程序（包括Bootstrap）

为什么我的导航栏在屏幕分辨率较小时没有折叠？

2 个答案: