У меня есть коллекция ссылок, которые я бы хотел выровнять по верху и низу моего navbar.В частности, это расположение:
После игры с кодом Ирфанди Джипа в ответе ниже и моих собственных дальнейших исследований, я придумал этокод:
<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
<a class="navbar-brand" href="{{ path('_home') }}">
<img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
<img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
<div class="nav-item mb-lg-5">
<div class="btn-group">
<button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
<a class="nav-link" href="">Login</a>
</button>
<button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
<a class="nav-link" href="">Sign Up</a>
</button>
</div>
</div>
<div class="nav-item mb-lg-5">
<div class="btn-group btn-group-lg">
<button class="btn btn-link p-0 m-0 d-none d-lg-inline">
<a class="nav-link" href=""><i class="far fa-envelope"></i></a>
</button>
<button class="btn btn-link p-0 m-0 d-none d-lg-inline">
<a class="nav-link" href=""><i class="fab fa-facebook-square"></i></a>
</button>
<button class="btn btn-link p-0 m-0 d-none d-lg-inline">
<a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
</button>
</div>
</div>
<a class="nav-link d-lg-none" href="">Login</a>
<a class="nav-link d-lg-none" href="">Sign Up</a>
</div>
<form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav> <!-- end nav -->
Что приводит к следующему:
Что действительно близко к чемуЯ хочу, за исключением того, как весь navbar растет внизу, без сомнения, результат поля, который я добавил (padding делает то же самое).В идеале значки социальных сетей должны находиться в той же «строке», что и панель поиска, а ссылки «Вход» и «Зарегистрироваться» вверху панели, как они есть в настоящее время.
Вот сравнение с черновикомчерновик макета:
Можно ли еще что-нибудь сделать, чтобы ссылки справа выглядели больше как на последнем изображении?