引导导航居中链接

Question

我是世界上最糟糕的造型师，所以让我们马上解决这个问题。

我很难找出正确的类以使第一个操作链接在页面上居中（或多或少）。我已经尝试了我的第一个 ul 的变体，比如 col-sm-6 和 text-right，但无济于事。一些右拉动作，这不是我想要的。

    <div id="bootstrapSOLmenu" class="navbar navbar-default">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Online Claim Center", "", "Claim")</li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("FAQ", "FAQ", "Claim")</li>
                    <li>
                        @Html.ActionLink("Help", "", null, new { href = "javascript:HelpPopup.Show();" })
                    </li>
                </ul>
            </div>
        </div>
    </div>

所以，我正在寻找的是将“在线索赔中心”链接置于页面中心，并将常见问题解答/帮助链接移至右侧（但在同一垂直平面上）。

我在想 col-sm-6 和 text-right 让 ul 占据页面的一半，然后把链接推到那里，但这行不通——链接保持左对齐。

Answer 1

我不完全确定这是否是您要查找的内容。

使用“justify-content-between”、边距和列类，我能够将页面上的一个链接放在一个 ul 内。这需要一个“col-5”和“col-7”div 以及 ul class="w-100"。

<nav class="navbar" navbar-expand-lg" justify-content-between">
    <div class="container">
        <div class="col-5">
           <!-- Brand / Logo -->
        </div>

        <div id="nav" class="collapse navbar-collapse col-7">
            <ul class="navbar-nav w-100>
                <li class="nav-item mr-auto"> <!-- Margin Right Pushes Link To Far Right -->
                   Online Claim Center
                </li>
                <li class="nav-item">FAQ</li>
                <li class="nav-item">Help</li>
            </ul>
        </div>
    </div>
</nav>

**如果您愿意，可以从 col-5 div 中删除内容。

https://codepen.io/wheel58m/pen/xxwyKGgCodePen