c# - 如何在 MVC 5 中的 Bootstrap 3 导航中将链接左右对齐

Question

我正在尝试获取我的导航栏 to look like this .然而，无论我对基本布局代码进行何种更改，文本似乎都不会与屏幕右侧对齐。

我的html代码如下:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        @if (Session["Logged_In"] == null)
        {
            <li>@Html.ActionLink("Home", "Index", "OUsers")</li>
            <li class="navbar-right">@Html.ActionLink("Create", "Create", "OUsers")</li>
            <li class="navbar-right">@Html.ActionLink("Login", "Login", "OUsers")</li>                       
        }
        @if (Session["Logged_In"] != null)
        {
            <li>@Html.ActionLink("Home", "LoggedIndex", "OUsers")</li>
            <li>@Html.ActionLink("Delete Account", "DeleteProfile", "OUsers")</li>
            <li>@Html.ActionLink("Edit Profile", "EditProfile", "OUsers")</li>
            <li style="float:right">@Html.ActionLink("Sign Out", "SignOut", "OUsers")</li>

        }
    </ul>
</div>

这不是完整的布局代码，但它是我实际编辑过的代码，似乎与文本对齐有关。此外，我的“navbar-right”类仅包含 float: right; 和 text-align: right;

奇怪的是，当我检查网站上的登录和创建操作链接时，应用了“navbar-right”类，但对齐方式没有改变。可能值得注意的是，我尝试将 css 类放在 actionlink 参数中，但没有任何改变，我还尝试了一个新的带有导航栏的分区，但这似乎使登录在 Home actionlink 下对齐，这对我来说也很奇怪。

Answer 1

看来您使用的是 Bootstrap 3。那么这就可以了

<div class="collapse navbar-collapse" id="navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>