Как выровнять ссылки по левому и правому краям в Bootstrap 3 навигации в MVC 5

Question

Я пытаюсь, чтобы моя панель навигации выглядела так . Однако текст не будет выравниваться по правой стороне экрана, по-видимому, независимо от того, какие изменения я внесу в базовый код макета.

Мой 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>

Это не полный предоставленный код Layout, однако это то, что я на самом деле отредактировал, и, похоже, он относится к выравниванию текста Также мой класс "navbar-right" состоит только из float: right; и text-align: right;

Странно то, что когда я проверяю ссылки для входа и создания на веб-сайте, еще применяется класс "navbar-right" выравнивание не изменилось. Возможно, стоит отметить, что я попытался поместить класс css в параметры actionlink, но ничего не изменилось, и я также ввел новое разделение с помощью navbar right, но это выровняло Login под 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>

Answer 2

Класс navbar-nav имеет свойство float:left, которое выравнивает все навигационные элементы по левой стороне, пытаясь переопределить