Bootstrap导航栏链接无法完全靠右对齐的问题求助

问题出在两个核心点：

• 右侧导航的<ul>误用了mr-auto类，这个类会设置margin-right: auto，让元素向左对齐而非向右。要实现右侧链接靠最右，需替换为ml-auto（设置margin-left: auto）。
• 左右两个navbar-collapse都添加了w-100类，导致每个容器占满整行，右侧导航被挤到下一行，无法与左侧导航在同一行显示。

修改后的简洁版代码 #

<nav class="navbar navbar-default navbar-expand-lg navbar-custom">
    <div class="navbar-collapse collapse dual-collapse2">
        <!-- 左侧导航：用mr-auto将右侧导航推至右侧 -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <!-- 右侧导航：用ml-auto实现靠右对齐 -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

保留双容器结构的调整方案 #

如果必须保留两个navbar-collapse的结构，需调整布局规则：

• 移除两个容器的w-100类
• 给第一个容器添加flex-grow-1，让它占据剩余空间
• 给第二个容器添加justify-content-end，强制内部元素靠右

代码示例：

<nav class="navbar navbar-default navbar-expand-lg navbar-custom">
    <div class="navbar-collapse collapse order-1 order-md-0 dual-collapse2 flex-grow-1">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>

    <div class="navbar-collapse collapse order-3 dual-collapse2 justify-content-end">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

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