Bootstrap 4-Navmenu（品牌左，登录（右），下面的菜单，折叠菜单中的登录和菜单）

Question

我正在努力将bootstrap3导航菜单转换为bootstrap4。

基本设置是这样：

-------------------------------------
|[Brand]                     [Login]|
|[MenuItem1] [MenuItem2], [etc]     |
-------------------------------------

品牌位于左上角，右上方登录（在折叠菜单内），然后菜单项从左到右位于品牌下方（也在折叠菜单内）。

折叠菜单应该是这样的

-----------------------------
|[Brand]                 [=]|
-----------------------------
|[Login]                    |
|[MenuItem1]                |
|[MenuItem2]                |
|[etc]                      |
-----------------------------

任何提示如何实现这一目标？

添加样板navnmenu-template

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav class="navbar navbar-dark bg-dark navbar-expand-md">
  <a class="navbar-brand">
          Brand
      </a>
  <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarNav">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" id="navbarNav">
      <a class="nav-link" href="#">Login</a>
    </ul>
    <ul class="nav navbar-nav" style="font-family:Verdana; color:white;">
      <li class="nav-item">
        <a class="nav-link" href="#">MenuItem1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">MenuItem2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">MenUItem3</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>