Bootstrap 折叠的导航栏显示为空

Question

当我点击手机上折叠得很好的引导导航栏中的汉堡菜单时，布局按预期滑到一边，但显示的是一个空的白色（或我拥有的任何正文背景颜色）栏而不是导航栏。使用 firebug 进行更仔细的检查表明，单击按钮后，navbar-collapse 上的某些类发生了更改，但仍被标记为不可见。

我已从 LESS 重新编译 Bootstrap 以更改它崩溃的点，但即使使用“香草”引导程序，问题似乎仍然存在。

代码：

<nav class="navbar transparent navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header" style="padding-right: 0px; min-width: 50px;">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
        <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 hidden-xs hidden-sm" href="index.html"><span class="glyphicon glyphicon-home" style="padding-right: 0px;"></span></a><a class="navbar-brand hidden-lg hidden-md" href="index.html">De Fijnkost</a>
    </div>

<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navigation-example-2">
      <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="vleeswaren.html" class="btn btn-white btn-simple">Fijne Vleeswaren</a>
          </li>
          <li>
            <a href="gerechten.html" class="btn btn-white btn-simple">Bereide Gerechten</a>
          </li>
          <li>
            <a href="salades.html" class="btn btn-white btn-simple">Eigen salades</a>
          </li>
          <li>
            <a href="kaas.html" class="btn btn-white btn-simple">Kazen &amp; Kaasschotels</a>
          </li>
          <li>
            <a href="broodjes.html" class="btn btn-white btn-simple">Belegde Broodjes</a>
          </li>
          <li>
            <a href="index.html#contact" class="btn btn-white btn-fill">Contact</a>
          </li>
          <li>
            <a href="nieuws.php" class="btn btn-white btn-fill">Nieuws</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle btn btn-white btn-fill" data-toggle="dropdown" href="#">Bestel&nbsp;<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li>
                <a href="kaasschotels.html">Kaasschotel</a>
              </li>
              <li class="disabled">
                <a href="broodjes.html#bestel">Broodjes</a>
              </li>
            </ul>
          </li>
       </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid-->
</nav>     

同样的事情发生在没有transparent 或navbar-fixed-top 类的页面上。 transparent 由我的 CSS 添加。页面可见于defijnkost.be

Answer 1

据我所知，您的 .navbar-collapse 设置为 display: none !important。

如果您在移动视图媒体查询中将其设置为display: block，它应该会正常显示。