如何在Bootstrap 5中让导航链接居中和位于navbar-brand下方？

你的代码存在两个核心问题导致效果不符合预期：

1. 错误使用了<unli>标签，应为标准的<ul>，这会破坏Bootstrap的默认导航样式
2. 布局类组合不合理，未正确设置flex容器的对齐规则

以下是修改后的完整代码，已实现导航链接居中且位于navbar-brand下方的需求：

<nav class="navbar navbar-expand-lg flex-column align-items-center" style="background-color: #FAF8F1; border:3px solid;">
    <!-- 品牌与汉堡按钮容器 -->
    <div class="d-flex w-100 justify-content-between">
        <a class="navbar-brand" href=""> Honeybee Babies </a>
        <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>
    <!-- 折叠内容区域 -->
    <div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
        <ul class="navbar-nav justify-content-center w-100 mb-3">
            <li class="nav-item rounded-pill mx-2" style="background-color:#C58940;">
                <a class="nav-link" style="color:#FAF8F1" href="">Baby Essentials</a>
            </li>
            <li class="nav-item rounded-pill mx-2" style="background-color:#C58940;">
                <a class="nav-link" style="color:#FAF8F1" href="">Price Range</a>
            </li>
            <li class="nav-item rounded-pill mx-2" style="background-color:#C58940;">
                <a class="nav-link" style="color:#FAF8F1" href="">Brands</a>
            </li>
        </ul>
        <form class="d-flex justify-content-center w-100" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn" style="color:#C58940" type="submit">Search</button>
        </form>
    </div>
</nav>

关键修改说明： #

• 将错误的<unli>标签改为标准的<ul>，修复Bootstrap导航菜单的样式失效问题
• 为最外层navbar添加align-items-center类，确保导航栏内所有元素水平居中对齐
• 品牌与汉堡按钮的容器新增w-100 justify-content-between，让品牌左对齐、汉堡按钮右对齐，同时容器占满整个宽度
• 给navbar-nav添加justify-content-center w-100，让导航链接水平居中，同时占满宽度；额外添加mb-3，让菜单和搜索框之间保持合理间距
• 搜索框容器添加justify-content-center w-100，确保搜索区域也水平居中

调整后，导航链接会在品牌下方居中显示，同时响应式折叠功能可正常工作。

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