Bootstrap 5.3.2中navbar嵌套container-fluid左右留白问题求助

将navbar嵌套在container-fluid容器中时，全屏或缩放窗口状态下navbar左右始终有留白，移除container-fluid后恢复正常，具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Find</title>
    <meta charset="UTF-8">
    <meta name="description" content="This is the my site">
    <meta name="keywords" content="bootstrap, css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
</head>

<body>
    <div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-dark bg-name">
            <button class="navbar-toggler" data-toggle="collapse" data-target="#expandme">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="expandme">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="../index.html" class="nav=item nav-link">Home</a>
                    <a class="nav-item nav-link active" href="about.html" class="nav=item nav-link">About Us</a>
                    <a class="nav-item nav-link active" href="gallery.html" class="nav=item nav-link">Gallery</a>
                    <a class="nav-item nav-link active" href="contact.html" class="nav=item nav-link">Contact</a>
                </div>
            </div>
            <div class="footer"></div>
            <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        </div>
</body>

</html>

问题原因 #

1. container-fluid的默认内边距：Bootstrap的container-fluid类自带左右内边距（默认值为1rem），navbar被嵌套在里面时，会被这个内边距挤压，导致左右无法铺满屏幕。而navbar本身默认是宽度100%且无额外内边距的，直接放在body下就能撑满全屏。
2. HTML结构错误：代码里的<nav>标签没有闭合，最后一个</div>实际是关闭container-fluid，但缺少对应的</nav>标签，浏览器解析异常会进一步影响样式渲染。
3. Bootstrap版本不兼容：你引入的CSS是5.3.2版本，但JS用的是4.4.1版本，虽然这不是留白的直接原因，但会导致navbar折叠按钮等功能失效，建议统一使用5.3.2的JS文件。

修正方案 #

如果需要保留container-fluid同时让navbar铺满屏幕，可以给container-fluid添加p-0类清除内边距，同时修复HTML结构，统一Bootstrap版本：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Find</title>
    <meta charset="UTF-8">
    <meta name="description" content="This is the my site">
    <meta name="keywords" content="bootstrap, css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
</head>

<body>
    <!-- 添加p-0清除内边距 -->
    <div class="container-fluid p-0">
        <nav class="navbar navbar-expand-lg navbar-dark bg-name">
            <!-- Bootstrap 5使用data-bs-toggle和data-bs-target -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#expandme">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="expandme">
                <div class="navbar-nav">
                    <!-- 移除重复的class属性 -->
                    <a class="nav-item nav-link active" href="../index.html">Home</a>
                    <a class="nav-item nav-link" href="about.html">About Us</a>
                    <a class="nav-item nav-link" href="gallery.html">Gallery</a>
                    <a class="nav-item nav-link" href="contact.html">Contact</a>
                </div>
            </div>
        </nav> <!-- 闭合nav标签 -->
        <div class="footer"></div>
        <!-- 使用Bootstrap 5的JS文件 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    </div>
</body>

</html>

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