Bootstrap рухнул navbar, показывая пустой

Question

Когда я нажимаю на меню гамбургера в моем красиво обрушенном бутстраповом навигаторе на моем телефоне, макет скользит в сторону, как ожидалось, но показывает мне пустой белый (или любой другой цвет фона тела, который у меня есть) вместо навигации. Более тщательная проверка с помощью Firebug показала, что после нажатия кнопки некоторые классы были изменены на navbar-collapse, но они по-прежнему помечены как невидимые.

Я перекомпилировал Bootstrap из LESS, чтобы изменить точку, в которой он обрушивается, но проблема кажется постоянной даже при использовании бутстрапа «ваниль».

Код:

<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 в своем мобильном представлении, он должен отображаться только в порядке.