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

Question

所以我正在尝试创建一个可调整大小的基本导航栏。折叠类应该让菜单自行折叠，但由于某种原因，当我调整屏幕大小时，唯一可见的是始终保持事件状态的标题。我在这里做错了什么？我尝试删除类、删除 div，但似乎没有任何效果。对于如何解决此问题的任何建议，我将不胜感激。谢谢!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<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

What am I doing wrong here?

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