引导导航居中链接

Question

我是世界上最糟糕的造型师，所以让我们马上把它拿出来。

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

<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 和文本右边让 ul 占据一半的页面，并将链接推到那里，但这不起作用 - 链接保持左对齐。

Answer 1

我不完全确定这是否是你要找的。

使用"对齐内容之间"、边距和列类，我能够在一个 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-5div 中删除内容。

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