Html 导航项目不正确

我试图创建一个导航条，它有3个部分（左导航、徽标、右导航），但是无论我使用什么flex类，我都无法使右导航浮动在右侧

这是我的HTML：

<div class="header-navbar navbar-expand-sm navbar navbar-horizontal floating-nav navbar-dark navbar-without-dd-arrow navbar-shadow menu-border" role="navigation" data-menu="menu-wrapper">
    <div class="navbar-header">
        <ul class="nav navbar-nav flex-row">
            <li class="nav-item mr-auto">
                <a class="navbar-brand" href="/">
                    <div class="brand-logo"></div>
                    <h2 class="brand-text mb-0">MyWebsite</h2></a>
            </li>
            <li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary" data-ticon="icon-disc"></i></a></li>
        </ul>
    </div>
    <div class="navbar-container main-menu-content navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" data-menu="menu-container">
        <ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
            <li class="nav-item active"><a class="nav-link" href="/play"><i class="feather icon-home"></i><span>Play</span></a></li>
            <li class="nav-item"><a class="nav-link" href="/stats"><i class="feather icon-bar-chart"></i><span>Statistics</span></a></li>
            <li class="nav-item"><a class="nav-link" href="/leaderboard"><i class="fa fa-trophy"></i><span>Leaderboards</span></a></li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="/">
            <div class="brand-logo"></div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"><span class="navbar-toggler-icon"></span></button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
            <li class="nav-item active"><a class="nav-link" href="/register"><i class="fa fa-user-plus"></i><span>Register</span></a></li>
            <li class="nav-item"><a class="nav-link" href="/login"><i class="fa fa-sign-in"></i><span>Login</span></a></li>
        </ul>
    </div>
</div>

从下面可以看到，结果是：

问题是您在最后一列中使用的是

mr auto

，而不是

ml auto

因为你们需要左边的空白，而不是右边的空白，这样它就可以和自己对齐了 对

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="nav navbar-nav flex-row">
            <li class="nav-item mr-auto">
                <a class="navbar-brand" href="/">
                    <div class="brand-logo"></div>
                    <h2 class="brand-text mb-0">MyWebsite</h2></a>
            </li>
            <li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary" data-ticon="icon-disc"></i></a></li>
        </ul>
        <ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
            <li class="nav-item active"><a class="nav-link" href="/play"><i class="feather icon-home"></i><span>Play</span></a></li>
            <li class="nav-item"><a class="nav-link" href="/stats"><i class="feather icon-bar-chart"></i><span>Statistics</span></a></li>
            <li class="nav-item"><a class="nav-link" href="/leaderboard"><i class="fa fa-trophy"></i><span>Leaderboards</span></a></li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="nav navbar-nav ml-auto" id="main-menu-navigation" data-menu="menu-navigation">
            <li class="nav-item active"><a class="nav-link" href="/register"><i class="fa fa-user-plus"></i><span>Register</span></a></li>
            <li class="nav-item"><a class="nav-link" href="/login"><i class="fa fa-sign-in"></i><span>Login</span></a></li>
        </ul>
    </div>
</nav>