Question

在引导导航栏中，我想证明右边的注销按钮合理。

笔展示了当前行为的一个示例：https://codepen.io/agrawalo/pen/mdbKYLX

代码：

<nav class="mb-1 navbar navbar-expand-sm navbar-dark bg-dark sticky-top">

    <div class="container">
        <!-- Collapse content -->
        <div class="justify-content-end">
            <!--Links-->
            <ul class="navbar-nav">
                <li class="nav-item {% if current == 'Allocate' %}active{% endif %}">
                    <a class="nav-link" href="/">Allocate Stocks</a>
                </li>
                <li class="nav-item {% if current == 'Portfolio' %}active{% endif %}">
                    <a class="nav-link" href="/portfolio">Portfolio</a>
                </li>
                <li class="nav-item {% if current == 'Transactions' %}active{% endif %}">
                    <a class="nav-link" href="/transactions">Transactions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if current == 'Leaderboard' %}active{% endif %}" href="/leaderboard">Leaderboard</a>
                </li>
                <li class="nav-item {% if current == 'Rules' %}active{% endif %}">
                    <a class="nav-link" href="/rules">Rules</a>
                </li>
                <li class="nav-item {% if current == 'Resources' %}active{% endif %}">
                    <a class="nav-link" href="/resources">Resources</a>
                </li>
                <li class="nav-item justify-content-end">
                    <a class="nav-link" href="/logout">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

我该怎么做？

Answer 1

要实现此目的，您需要两个.navbar-nav元素而不是一个元素，并且将mr-auto类放在第一个元素上，或者将ml-auto放在第二个元素上。
您还必须将以下CSS应用于其直接包装器：

display: flex;
flex: 1 0 100%;
align-items: center;

默认情况下，CSS通过您似乎已删除的类collapse和navbar-collapse来应用。

有关导航栏正确标记的完整示例，请参见Bootstrap文档：Navbar。

您的工作updated codepen。

Answer 2

要使内容正确，您需要像下面的代码一样重新排序代码

                       mode      HH
                        2         1
                        3         4
                        2         1
                        2         2

编辑：我复制了我的导航，现在我意识到您的导航只是堆栈，因此您不必包含切换按钮或折叠代码

Bootstrap Navbar-向右移动一个导航项

2 个答案: