Я новичок в Bootstrap.
В Bootstrap 4 я хотел бы использовать фирменный Navbar с фиксированным верхом. Навбар должен отображать марку, 6 элементов навигации и выпадающий список:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</li>
</ul>
</div>
</nav>
В больших окнах просмотра страница будет отображаться в контейнере шириной 1200 пикселей.
Я хотел бы изменитьгоризонтальные позиции элементов Navbar таким образом, чтобы 6 элементов nav были центрированы по горизонтали в контейнере 1200 пикселей, элемент бренда заканчивается в левом начале контейнера, а выпадающий элемент начинается в правом конце контейнера:
В маленьких окнах просмотра Navbar должен следовать своему стандартному поведению, т.е. он должен свернуться и показать гамбургер (который объединяет 6 пунктов меню, а также выпадающий список) иЭлемент бренда должен начинаться горизонтально с левой стороны области просмотра.
Как я могу это реализовать?
РЕДАКТИРОВАТЬ:
Этот код
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav m-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">dropdown item 1</a>
<a class="dropdown-item" href="#">dropdown item 2</a>
<a class="dropdown-item" href="#">dropdown item 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
дает этот результат: 
Изменения:
- a
<div class="container"> после <nav...>. Это дает контейнер 1200 пикселей. - два
<ul class="navbar-nav"> вместо одного. Это отделяет 6 элементов nav от выпадающего списка. - , первый
<ul class="navbar-nav"> использует m-auto. Это центрирует 6 элементов nav и сдвигает выпадающий список вправо.
Однако результат не таков, как должен быть. Элемент бренда должен заканчиваться в левом начале центрированного 1200px, а выпадающий элемент должен начинаться в правом конце центрированного 1200px:
Как решить эту проблему?