Хочу разместить ссылку с правой стороны и в обычной и в мобильной версии, но при этом, чтобы эта ссылка была зафиксирована с правой стороны всегда: и на компьютере и на мобильном. Все как бы работает, подумал я, но есть одна проблема.
Вот так выглядит Navbar в мобильной версии (именно сверху, на нижнее вертикальное меню не обращайте внимания). Видим, что справа ссылка размещена. Теперь нажимаю кнопку раскрытия меню с остальными ссылками:
Как видите, проблема в том, размещенная мною ссылка справа тоже выпадает, да и вообще, словно вся эта часть navbar'а сползает вниз, судя по тому, что даже navbar-brand сместился. Код выглядит так:
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light navbar-expand-sm bg-light border-bottom">
<button class="d-md-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand mx-md-0 mx-sm-auto">Laravel</a>
<div class="collapse navbar-collapse" id="navbar-content">
<ul class="navbar-nav navbar-left">
<li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
</ul>
</div>
<ul class="navbar-nav navbar-right">
<li class="nav-item">
<a href="#" class="nav-link">Item</a>
</li>
</ul>
</nav>
Пробовал поменять местами div с коллапсом и ul со ссылкой справа - тогда в мобильной версии все как я и хочу, а в обычной ссылка получается не справа, а слева, сразу после brand. Что делаю не так?