如何解决Bootstrap 4替换Bootstrap 3后在PHP+HTML站点无法正常工作的问题？

阿华AIGC实验室

2026-5-11

解决Bootstrap 4替换Bootstrap 3后导航栏失效的问题

兄弟，直接把Bootstrap 3换成4肯定会出问题——这俩版本在导航栏这类组件上有大量不兼容的类名和结构变化，你的代码里全是Bootstrap 3的写法，在v4里自然跑不起来。我帮你一步步修复：

1. 替换导航栏核心类名

Bootstrap 4彻底重构了导航栏的样式类：

把 navbar-inverse 换成 navbar-dark bg-dark（如果想要深色导航栏，也可以用bg-primary这类主题色类）
把 navbar-fixed-top 合并到navbar类里，改成 fixed-top（直接加到<nav>标签的类列表中）

2. 修复下拉菜单的结构

Bootstrap 4对下拉组件的要求更严格：

父<li>需要添加dropdown类
dropdown-toggle标签要补充aria-haspopup="true"和aria-expanded="false"属性，确保无障碍支持
你之前的代码里dropdown的<a>标签未正确闭合，这也会导致结构异常

3. 补充必要的JS依赖

Bootstrap 4的交互组件（比如下拉菜单）依赖Popper.js和jQuery，你之前的代码里没引入这些，这也是菜单无法展开的关键！要在页面底部（</body>之前）按顺序引入：

jQuery（确保是v4兼容的版本，比如3.5.x以上）
Popper.js
Bootstrap 4的JS文件

修复后的完整代码示例

<header>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.css"> <!-- 确认是Bootstrap 4的CSS文件 -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
</header>
<body>
    <nav class="navbar navbar-dark bg-dark fixed-top"> <!-- 更新后的导航栏类 -->
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><i class="fa fa-user"></i></a>
            </div>
            <ul class="nav navbar-nav ">
                <li><a href="/">About</a></li>
                <li><a href="/pages/school/courses.php">Blog</a></li>
                <li><a href="/pages/cubing/cubing.php">Reviews</a></li>
                <li><a href="/pages/cubing/cubing.php">Cubing</a></li>
                <li class="dropdown"> <!-- 添加dropdown类 -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">More</a> <!-- 补充属性并闭合标签 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">1</a></li>
                        <li><a href="#">-Attacks</a></li>
                        <li><a href="#">Cubify</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 在页面底部引入JS依赖 -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script> <!-- 确认是Bootstrap 4的JS文件 -->
</body>

额外注意事项

检查你的/css/bootstrap.css和/js/bootstrap.min.js是否确实是Bootstrap 4的版本，别不小心还是用了v3的文件
如果你的style.css里写了依赖Bootstrap 3类的自定义样式（比如针对.navbar-inverse的修改），也要同步更新为Bootstrap 4的类名
测试时打开浏览器开发者工具（F12），查看控制台有没有报错，比如文件找不到、JS依赖缺失的问题，这些都能帮你快速定位问题

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