Bootstrap导航栏仅显示Recipe Book，其余导航链接不显示如何排查

问题原因 #

• 核心原因是你给导航项的外层容器加了collapse navbar-collapse类，Bootstrap 3中这个类默认在屏幕宽度小于768px时会隐藏容器内的所有内容，仅在触发折叠按钮时才展示。你当前没有添加对应的折叠触发按钮，小屏幕下自然看不到除了品牌名之外的导航项。
• 如果是在大屏幕下也看不到，大概率是你引入的Bootstrap版本和代码语法不匹配：你写的是Bootstrap 3的导航类语法，如果你实际引入的是Bootstrap 4/5的资源，类名规则已经修改，原有类不会生效，导航项会被隐藏。
• 没有引入Bootstrap依赖的jQuery和Bootstrap自身的JS文件，也会导致折叠相关的功能失效。

修复方案（Bootstrap 3版本适配） #

1. 在navbar-header容器内添加折叠触发按钮，给navbar-collapse容器加对应id绑定触发关系
2. 确保页面头部依次引入jQuery库、Bootstrap3的CSS文件、Bootstrap3的JS文件

修复后的代码如下：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- 新增折叠触发按钮 -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-content" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">
                Recipe Book
            </a>
        </div>
        <!-- 给collapse容器加id和按钮绑定 -->
        <div class="collapse navbar-collapse" id="navbar-content">
            <ul class="nav navbar-nav">
                <li><a href="#">Recipes</a></li>
                <li><a href="#">Shopping List</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">Manage<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Save Data</a></li>
                        <li><a href="#">Fetch Data List</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

如果是用Bootstrap 4/5版本，替换整套导航的类名规则适配新版本语法即可。

内容的提问来源于stack exchange，提问作者Reem Al-Assaf