如何通过自定义CSS让修改后的Bootstrap导航栏保持响应式？

你遇到的问题根源在于固定的大间距和非响应式字体破坏了Bootstrap导航栏的折叠逻辑：

• gap:10vh用了视口高度单位，不管屏幕宽度，强制给导航项加了超大横向间距，小屏幕下导航项总宽度直接撑爆容器，导致无法触发折叠；
• fs-4是全局字体大小，小屏幕下文字尺寸依然过大，进一步加剧布局溢出。

修复方案 #

直接用Bootstrap的响应式工具类替代硬编码的样式，让间距和字体大小随屏幕尺寸自适应：

1. 替换固定gap为响应式间距：移除style="gap:10vh;"，改用gap-md-5 gap-sm-2 gap-1（md及以上用大间距，sm用中间距，xs用小间距），可根据需求调整间距数值；
2. 替换全局字体为响应式字体：把fs-4改成fs-md-4 fs-sm-5 fs-6，让小屏幕自动用更小的字体；
3. 保留navbar-expand-sm，确保xs屏幕（<576px）自动折叠成汉堡菜单。

修改后的完整代码 #

<body>
    <header class="header">
        <nav class="p-nav navbar navbar-expand-sm navbar-light border">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- 用响应式gap和字体类替代固定样式 -->
                    <ul class="navbar-nav m-auto mb-0 mb-lg-0 d-flex justify-content-between gap-md-5 gap-sm-2 gap-1">
                        <li class="nav-item fs-md-4 fs-sm-5 fs-6">
                            <a class="nav-link" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item fs-md-4 fs-sm-5 fs-6">
                            <a class="nav-link" href="#">Service</a>
                        </li>
                        <li class="nav-item fs-md-4 fs-sm-5 fs-6">
                            <a class="nav-link" href="#">Service Area</a>
                        </li>
                        <li class="nav-item fs-md-4 fs-sm-5 fs-6">
                            <a class="nav-link" href="#">Fleet</a>
                        </li>
                        <li class="nav-item fs-md-4 fs-sm-5 fs-6">
                            <a class="nav-link" href="#">Reservation</a>
                        </li>
                        <li class="nav-item fs-md-4 fs-sm-5 fs-6">
                            <a class="nav-link" href="#">Faq</a>
                        </li>
                        <li class="nav-item fs-md-4 fs-sm-5 fs-6">
                            <a class="nav-link" href="#">Contact Us</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <img src="assets/car(container).gif" alt="" class="img-fluid img-cc">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
        crossorigin="anonymous"></script>
</body>

额外说明 #

• 如果需要更自定义的间距，不要用vh单位，改用rem或者Bootstrap的间距变量（比如var(--bs-gutter-x)），避免和视口高度绑定；
• 检查container-fluid是否正确包裹导航内容，确保容器宽度自适应屏幕。

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