使用Bootstrap 5实现导航栏内容左右分栏对齐的问题

问题根源 #

你的代码里有三个关键错误导致布局失效：

1. 导航栏内部容器错误添加了position-fixed，干扰了Bootstrap的Flex布局逻辑
2. 列表类名写错，应该是navbar-nav而非navbar nav
3. 对齐类使用逻辑错误，实现右侧对齐需要给目标元素添加ms-auto（左外边距自动）

修正后的代码 #

<nav class="navbar fixed-top">
    <div class="container" id="navbarSupportedContent">
        <a class="navbar-brand" href="/">Company</a>

        <!-- 左侧导航链接 -->
        <ul class="navbar-nav">
            <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
            <li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
        </ul>

        <!-- 右侧下拉菜单 -->
        <ul class="navbar-nav ms-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown
                </a>
                <!-- 补全下拉菜单子项 -->
                <ul class="dropdown-menu" aria-labelledby="navbarDarkDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

关键修改说明 #

• 将内部容器的navbar-nav position-fixed替换为container（或container-fluid，根据布局需求选择），恢复Bootstrap默认Flex布局环境
• 修正所有列表类名为navbar-nav，确保正确应用导航列表的样式与布局规则
• 给下拉菜单所在列表添加ms-auto，利用Flex布局自动外边距将其推至导航栏右侧
• 补全下拉菜单子项（原代码缺失），确保功能完整

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