Bootstrap 3 - 导航栏内容在屏幕调整大小时消失 - 不折叠

Question

所以我试图创建一个调整大小的基本导航栏。折叠类应该让菜单自动折叠，但由于某种原因，当我调整屏幕大小时，唯一可见的是始终保持活动的标题。我在这里做错了什么？我尝试删除类，删除div，并没有任何工作。我将不胜感激任何关于如何解决这个问题的建议。谢谢！

<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