Bootstrap Navbar纵向排列问题：如何修改为横向展示？

你的Navbar变成纵向是因为两个核心问题：缺少控制横向展开的Bootstrap类，以及折叠按钮的属性不匹配Bootstrap 5规范，同时还缺失折叠功能依赖的Bootstrap 5 JS文件。以下是修改后的完整代码和关键说明：

修改后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">

    <title>Document</title>
</head>
<body>

    <!-- nav bar -->
    <nav class="navbar navbar-expand navbar-dark bg-dark">
        <a class="navbar-brand" href="#">
            <img src="the-larder-logo.png" width="50" height="50" alt="">
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" 
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Food <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Drink</a>
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Contact Us</a>
                <a class="nav-item nav-link" href="#">Special Events</a>
            </div>
        </div>
    </nav>

    <!-- Bootstrap 5 JS 依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

关键修改点 #

• 添加navbar-expand类：给<nav>标签加上navbar-expand，这会让Navbar在所有屏幕尺寸下保持横向布局。如果想在小屏幕（如手机）自动折叠成汉堡菜单，可换成navbar-expand-md（中等屏幕及以上横向）或navbar-expand-lg（大屏及以上横向）。
• 修正折叠按钮属性：Bootstrap 5将data-toggle和data-target更新为带bs前缀的data-bs-toggle和data-bs-target，且要保证data-bs-target的值与折叠容器的ID（#navbarNavAltMarkup）完全匹配。
• 引入Bootstrap 5 JS：折叠功能需要Bootstrap的JS支持，因此要在页面末尾引入bootstrap.bundle.min.js（已包含Popper.js，无需单独引入）。
• 移除多余的show类：折叠容器上的show类会让菜单默认展开，移除后小屏幕下菜单会默认折叠，点击汉堡按钮才会展开。

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