Я создал навигационную панель с Bootstrap 4 alpha 6, у которой есть большой знак/значок слева, и 2 navbar-nav со ссылками справа от значка. У одного навигатора есть ссылки, а у другого навигатора есть значки. Он работает так, как я хочу, кроме одного.
Я бы хотел, чтобы 2 навигатора появлялись в двух отдельных строках справа от значка. Вот так:
------------------------------------------------------
link link link link
brand-icon -------------------------------------------
icon icon icon
------------------------------------------------------
Мобильная версия по-прежнему будет показывать ссылки по вертикали, как сейчас. Я пробовал несколько разных вещей с помощью flexbox, но не могу заставить его работать.
Вот мой код:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>