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

Question

在我的 Bootstrap 导航栏中，我想将注销按钮放在右边。

演示当前行为示例的笔: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 .