Bootstrap 3 - содержимое навигационной панели исчезает при изменении размера экрана - не разрушается

Question

Итак, я пытаюсь создать базовую навигационную панель, которая изменяет размер. Класс collapse должен позволить самому сворачивать меню, но по какой-то причине, когда я изменяю размер экрана, единственное, что видно, это заголовок, который постоянно остается активным. Что я здесь делаю неправильно? Я попытался удалить классы, удалив divs, и ничего не работало. Я был бы признателен за любые предложения о том, как подойти к этой проблеме. Благодаря!

<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation"> 
     <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Header</a> 
     </div> 
     <div class="container"> 
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="active"> 
          <a href="#">Option 1</a> 
         </li> 
         <li> 
          <a href="#">Option 2</a> 
         </li> 
         <li> 
          <a href="#">Option 3</a> 
         </li>     
         <li> 
          <a href="#">Option 4</a> 
         </li> 
         <li> 
          <a href="#">Option 5</a> 
         </li> 
         <li> 
          <a href="#">Option 6</a> 
         </li> 
         <li> 
          <a href="#">Option 7</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </nav> 

Answer 1

Что я здесь делаю неправильно?

1. Вы упускаете кнопку переключения и его потомков (см. Ниже)
2. У вас есть div.collapse.navbar-collapse, дублированный дважды, удалите первый из документов.
3. div.container предполагается разместить непосредственно послеnav.navbar-fixed-top при использовании фиксированной навигационной панели.

Добавить кнопку и ее содержимое в .navbar-header

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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="#">Header</a> 
</div> <!--/.navbar-header--> 

Working Example