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