Bootstrap 4导航栏切换器显示菜单项，但不展开导航栏

Question

现在，我有一个导航栏，当屏幕变小时，它会折叠。它确实会折叠，并且切换按钮可以正常工作，但是当我单击切换按钮时，导航栏将过渡并向下推以显示菜单项，但是一旦完成下推操作，它就会向上返回，但菜单项目保留在那里，页面的主要内容将覆盖一些菜单项。

我花了最后几个小时来寻找解决方案，但似乎什么也找不到。有人有提示吗？

navbar.component.html

<nav class="navbar navbar-expand-md navbar-dark bg-transparent shadow-lg                  navbar-static-top">    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
    <span class="navbar-toggler-icon"></span>   </button>

  <div class="collapse navbar-collapse" id="collapse_target">   <a routerLink="home"><span class="navbar-brand mb-0 h1 "></span></a>

  <ul class="nav navbar-nav navbar-center">
    <li class="nav-item" [routerLinkActive]="['active']">
      <a class="nav-link" routerLink="/home">Home</a>
    </li>
    <li class="nav-item" [routerLinkActive]="['active']">
      <a class="nav-link" routerLink="/services">Resume</a>
    </li>
    <li class="nav-item" [routerLinkActive]="['active']">
      <a class="nav-link" routerLink="/contact">Projects</a>
    </li>
    <li class="nav-item" [routerLinkActive]="['active']">
      <a class="nav-link" routerLink="/contact">Contact</a>
    </li>   </ul> </div> </nav>

navbar.component.css

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
.nav a{

    font-size: 1.2em !important;
}