Бутстрап 4 NAVBAR с тремя предметами

Question

Я пытаюсь использовать Bootstrap 4, с тремя пунктами в navbar. Я хочу марку слева, navbar-nav элементы справа.

Эта часть прямая, моя проблема в том, что я хочу, чтобы другой раздел был выровнен по левому краю, рядом с BRAND.

Он делает то, что я хочу, когда экран большой (см. Ниже).

Моя проблема, когда экран становится меньше. 3-й предмет прыгает в середину, и я не могу понять, почему.

Документация заставляет меня поверить, что я могу использовать гибкое поведение, но ничего из того, что я пробовал, не работает.

Можно ли это сделать из коробки?

Я установил пример кода на codeply, который можно увидеть здесь: http://codeply.com/go/6y6XapGG4k

Вы можете видеть, когда порт просмотра большой, кнопка example.com показывает слева. Когда экран сжимается и пункт меню сжимается, кнопка example.com переходит в середину экрана.

Я пытаюсь удерживать кнопку слева, рядом с BRAND.

Answer 1

Добавьте класс "mr-auto" к вашему "navbar-nav"

<div class="navbar-nav mr-auto">
    <div class="dropdown">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
            example.com
      </button>
    </div>
</div>