Выравнивание по правому краю

158

15 января 2020, 02:00

Не получается перенести последний пункт меню (Logout) вправо. Классы float-right и text-right не помогают. Bootstrap4

<header>
    <nav class="navbar navbar-light bg-light navbar-expand-lg mb-5">
        <div class="container" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item {% if (app.url == '/admin') %}active{% endif %}">
                    <a class="nav-link" href="/admin">Profile</a>
                </li>
                <li class="nav-item {% if (app.url == '/admin/users') %}active{% endif %}">
                    <a class="nav-link" href="/admin/users">Users</a>
                </li>
                <li class="nav-item {% if (app.url == '/admin/products') %}active{% endif %}">
                    <a class="nav-link" href="/admin/products">Products</a>
                </li>
                {% if (app.session.user_hash) %}
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">Logout</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </nav>
</header>

Answer 1

Вся прелесть в том, что нужно вынести последнюю ссылку за список.

nav { 
  height: 100%; 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
 
<header> 
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
    <div class="container"> 
      <div class="collapse navbar-collapse" id="navbarText"> 
        <ul class="navbar-nav mr-auto"> 
          <li class="nav-item active"> 
            <a class="nav-link" href="#">Home</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="#">Pricing</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="#">Pricing</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="#">Pricing</a> 
          </li> 
        </ul> 
        <a class="nav-link" href="#">Another Link</a> 
      </div> 
    </div> 
  </nav> 
</header>

Preview на всю страницу открывайте