如何在Bootstrap5导航栏添加搜索栏与图标并保持Logo居中？

问题根源 #

你之前直接在单个 navbar-nav 末尾加搜索栏，破坏了原有导航项与 Logo 的平衡布局，导致 Logo 偏移、搜索栏垂直错位。需要通过拆分导航结构，利用 Bootstrap 的 Flex 布局规则来维持 Logo 居中，同时让搜索栏与导航项对齐。

修改后的完整代码 #

<header>
    <nav class="navbar navbar-expand-md">
        <div id="nav" class="container-fluid d-flex align-items-center justify-content-between">
            <!-- 移动端专用 Logo -->
            <a class="navbar-brand d-md-none" href="index.html">
                <img src="relogo.png" alt="Logo">
            </a>
            <!-- 折叠菜单按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 折叠内容容器 -->
            <div class="collapse navbar-collapse w-100" id="navbarNav">
                <!-- 左侧导航项 -->
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ANBIETER</a>
                    </li>
                </ul>
                <!-- 桌面端居中 Logo -->
                <a class="navbar-brand d-none d-md-block mx-auto" href="index.html">
                    <img src="relogo.png" alt="Logo">
                </a>
                <!-- 右侧导航项+搜索栏 -->
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#">ÜBER UNS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="kontakt.html">KONTAKT</a>
                    </li>
                    <!-- 搜索栏（带图标） -->
                    <li class="nav-item">
                        <form class="d-flex">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success" type="submit">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                </svg>
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

核心调整点 #

1. 拆分导航结构：将原单个 navbar-nav 拆分为「左侧导航」「居中 Logo」「右侧导航+搜索」三个独立模块，通过 me-auto（左侧模块推 Logo 到中间）、ms-auto（右侧模块固定在右边）、mx-auto（Logo 强制居中）实现桌面端平衡布局。
2. 垂直对齐处理：给右侧 navbar-nav 添加 align-items-center，让搜索栏与导航项保持同一垂直高度，解决下移问题。
3. 响应式兼容：保留移动端专用 Logo，折叠菜单会自动包含所有导航项与搜索栏，不影响移动端体验。

内容的提问来源于stack exchange，提问作者Jan Niklas Benn