如何用HTML和Bootstrap5实现导航栏菜单右半区均匀分布？

要实现Logo居左、菜单项占据导航栏右半部分并均匀分布的效果，只需对现有代码做以下调整：

修改要点 #

• 给菜单项的<ul>容器添加w-50类，让它占据导航栏50%的宽度（即右半部分）
• 用justify-content-around替代flex-fill，实现菜单项在容器内均匀分布
• 移除冗余的list-inline-item类，避免和Bootstrap导航栏自带样式冲突

修改后的完整代码 #

<nav class="navbar navbar-expand-sm bg-dark mt-0 navbar-dark">
    <!-- Logo -->
    <a href="#" class="navbar-brand p-2">Logo</a>
    
    <!-- Button -->
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Menu -->
    <div class="collapse navbar-collapse" id="menu">
        <!-- lists -->
        <ul class="navbar-nav ms-auto d-flex w-50 justify-content-around">
            <li class="nav-item">
                <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">About Us</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Services</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Contact</a>
            </li>
        </ul>
        <!-- End of menu -->
    </div>
</nav>

关键样式说明 #

• ms-auto：将整个菜单项容器推至导航栏右侧，确保Logo和菜单项左右分离
• w-50：限制菜单项容器宽度为父元素的50%，精准占据右半部分空间
• justify-content-around：让菜单项在容器内均匀分配空间，左右两端留有空白；若需要菜单项完全贴合容器左右边缘，可替换为justify-content-between

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