Question

当我点击我手机上漂亮折叠的自举导航栏中的汉堡菜单时，布局会按预期滑到一边，但会显示一个空的白色（或者我有的任何身体背景颜色）栏而不是导航。使用萤火虫进行仔细检查后发现，点击按钮后，navbar-collapse上的某些课程发生了变化，但仍然被标记为不可见。

我已经从LESS重新编译Bootstrap以改变它崩溃的程度，但即使使用＆＃39; vanilla＆＃39;自举。

代码：

<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类的网页上发生同样的事情。我的CSS添加了transparent。页面在defijnkost.be

上可见

Answer 1

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

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

Bootstrap折叠导航栏显示为空

1 个答案: