bootstrap导航居中链接

Question

我是世界上最差的造型师，所以让我们现在就开始吧。

我很难找到正确的类来让第一个动作链接在页面上居中(或多或少)。我已经尝试了我的第一个ul的变体，比如on 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>

所以，我正在寻找的是获得“在线索赔中心”的链接居中的页面，并有常见问题/帮助链接到右侧(但在同一垂直平面)。

我在考虑使用ul sm-6和text-right让ul占据半个页面，并将链接推到那里，但这行不通--链接保持左对齐。

Answer 1

我不太确定这是不是你要找的。

通过使用"justify-content-between“、margins和column类，我能够在一个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