Bootstrap 5 inverse导航菜单样式不生效问题求助

问题描述 #

尝试创建带有黑色背景、白色字体的Bootstrap inverse导航菜单，使用示例代码后未显示正确样式，当前菜单效果与预期不符。

当前代码 #

<!doctype html>
<html lang="en">
<head>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

     <title>Hello, world!</title>
</head>
<body>
    <div>
        <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
</div>

<h1>Hello, world!</h1>
</body>
</html>

当前效果 #

预期效果 #

问题原因与解决方案 #

你使用的是Bootstrap 5.3.3，但navbar-inverse、navbar-header这些是Bootstrap 3的专属类名，Bootstrap 5已完全废弃这类旧类，改用新的样式体系实现深色导航：

1. 替换核心样式类：将navbar navbar-inverse改为navbar navbar-expand-lg navbar-dark bg-dark，其中navbar-dark负责设置白色字体，bg-dark设置黑色背景，navbar-expand-lg保证导航在大屏设备正常展开（可根据需求替换为sm/md/xl等尺寸前缀）。
2. 调整导航结构：Bootstrap 5中无需navbar-header容器，直接将品牌链接放在navbar内部；导航列表的nav navbar-nav改为navbar-nav，同时链接需要添加nav-link类修饰，active类要配合aria-current="page"属性标记当前页面，符合无障碍规范。

修正后的完整代码 #

<!doctype html>
<html lang="en">
<head>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">WebSiteName</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Page 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Page 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Page 3</a>
                </li>
            </ul>
        </div>
    </nav>

    <h1>Hello, world!</h1>

    <!-- Bootstrap JS 放在body末尾，避免DOM未加载完成时执行脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</body>
</html>

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