Bootstrap 4默认navbar无法正常显示，寻求技术帮助

嘿，我看你在实现Bootstrap 4默认导航栏时卡壳了，这就帮你排查修复！

你的代码里存在几个核心问题： #

• 没引入Bootstrap 4的依赖文件：Bootstrap的样式和交互逻辑都依赖它的官方CSS、JS，还有配套的Popper.js，没引入的话导航栏根本不会生效
• 用了Bootstrap 3的旧类名：navbar-default是Bootstrap 3的类，Bootstrap 4已经弃用这个写法了，得换成对应的新类
• 代码片段不完整：你的折叠按钮class没写完，应该是navbar-toggler才能实现移动端的菜单折叠功能

下面是修正后的完整可运行代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Portofolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入Bootstrap 4核心CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <!-- 引入Bootstrap 4 JS依赖的jQuery和Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- 引入Bootstrap 4核心JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <!-- 品牌标识 -->
            <a class="navbar-brand" href="#">Portfolio</a>
            
            <!-- 移动端折叠按钮 -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <!-- 导航菜单容器 -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Projects</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

关键修改说明： #

1. 补全依赖引入：在<head>里添加了Bootstrap 4的CSS，在页面底部添加了jQuery、Popper.js和Bootstrap JS，这是Bootstrap组件正常工作的基础
2. 替换导航栏类名：把navbar-default换成了navbar-expand-lg navbar-light bg-light，navbar-expand-lg控制大屏下菜单自动展开，navbar-light+bg-light实现浅色主题，你也可以换成navbar-dark bg-dark用深色主题
3. 完善折叠按钮：补全了移动端折叠按钮的class和交互属性，确保小屏幕下能正常展开/收起菜单
4. 补充完整结构：添加了品牌链接、导航菜单列表，让导航栏的功能和样式都完整

把这段代码复制运行，就能看到正常的Bootstrap 4导航栏啦！

内容的提问来源于stack exchange，提问作者DeadlyDev