е всего, как заявление об отказе от ответственности, я полный новичок, когда дело доходит до Bootstrap. Я думал, что сделать адаптивное меню было бы просто, но я столкнулся с проблемой, когда я создал адаптивную навигационную панель с помощью начальной загрузки 4, которая выглядит следующим образом:

Когда это изменение размера, теперь это выглядит следующим образом:

Но когда я нажимаю на выпадающее меню, оно выглядит следующим образом:

Я бы хотел, чтобы кнопка осталась на своей позиции справа и не была втянута в меню. Действительно запутался относительно того, почему это происходит. Код для этого:

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">

  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>

  <div class="collapse navbar-collapse ml-auto justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
    </ul>
  </div>
  <a class="btn btn-outline-info" href="#">Button</a>

</nav>

Я ценю помощь!