Angular中的自适应Bootstrap导航栏

Question

我的Angular 7项目中确实有一个bootstrap @ 3导航栏。

nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">

        <a class="navbar-brand" routerLink="/">
          <div class="container" style="padding-left: 0px;  padding-right: 0px; height: 20px; width: 40px">
              UTCN
          </div>
          </a>
         <div class="navbar-brand" style="margin-left: 3px;"><i class="fas fa-bars"></i></div>
    </div>


    <div class="collapse navbar-collapse">

      <ul class="nav navbar-nav navbar-right">
        <ng-template [ngIf]="!authService.isAuthenticated()">
          <li routerLinkActive="active"><a routerLink="/signup">Register</a></li>
          <li routerLinkActive="active"><a routerLink="/signin">Login</a></li>
        </ng-template>
      </ul>

    </div>
  </div>
</nav>

我需要获得响应行为，但右侧的内容是类' nav navbar-nav navbar-right 的 div 元素。当屏幕尺寸较小（ xs ）时，>将消失。

如何使该div使用左侧的可用空间而不消失？