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

【问题标题】：Bootstrap 3 - navbar content dissappears when screen resizes - does not collapseBootstrap 3 - 屏幕调整大小时导航栏内容消失 - 不折叠
【发布时间】：2021-02-25 21:18:43
【问题描述】：

所以我正在尝试创建一个可调整大小的基本导航栏。折叠类应该让菜单自行折叠，但由于某种原因，当我调整屏幕大小时，唯一可见的是始终保持活动状态的标题。我在这里做错了什么？我尝试删除类，删除 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>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我在这里做错了什么？

您缺少切换按钮及其后代（见下文）。
div.collapse.navbar-collapse 重复了两次，请从文档中删除第一个。
使用固定导航栏时，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

【讨论】：