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

131
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 на всю страницу открывайте

READ ALSO
Как менять fill у разноцветной url-encoded svg на лету?

Как менять fill у разноцветной url-encoded svg на лету?

На sass я использую функцию для преобразования inline SVG в URL-encoded SVG

96
как получить все метки с карты гугл?

как получить все метки с карты гугл?

как получить все метки с карты гугл?

125
Как сделать что бы изображение всегда появлялось под мышкой?

Как сделать что бы изображение всегда появлялось под мышкой?

Как сделать что бы при клике изображение всегда появлялось под мышкой в заданном блоке?

116