在切换时，boostrap折叠项的定位

Question

一切似乎都正确对齐，直到触发切换按钮。我正在尝试防止触发崩溃时转移“警报”和“关于”项目。

这是我的代码：

<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark mb-3">
          <div class="flex-row d-flex">
              <button type="button" class="navbar-toggler mr-2" data-toggle="collapse" data-target="#collapsingNavbar">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
          </div>
          <div class="navbar-collapse collapse" id="collapsingNavbar">
              <ul class="navbar-nav">
                  <li class="nav-item">
                      <a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                  </li>
              </ul>
          </div>
          <ul class="navbar-nav ml-auto flex-row d-flex">
              <li class="nav-item mr-4">
                  <a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
              </li>
          </ul>
      </nav>