mdb 导航栏保持翻转高度

Question

我的 Angular 应用程序中有一个 mdb 导航栏，但导航栏的高度似乎在重新加载页面时随机翻转到一个更大的高度（有时它保持高度，其他时候它增加了高度）。此外，一旦我在 Chrome 中打开开发人员控制台，大小就会调整回正常，这使得很难找到问题所在。

以下屏幕截图显示了 1.) 它应该一直看起来的样子和 2.) 当我刷新页面时它有时是如何显示的：

我的导航栏位于一个单独的 Angular 组件中，我将其添加到 app.component.html 中，如下所示：

<app-header></app-header>
<div class="d-flex p-2 justify-content-center">
  <router-outlet></router-outlet>
</div>

header 本身也很简单，看起来几乎像 mdb

提供的示例

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo" [containerInside]="false">
  <mdb-navbar-brand>
    <a class="navbar-brand" [routerLink]="'/dashboard'">Admin Console</a>
  </mdb-navbar-brand>
  <links>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/dashboard'">Dashboard</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">Users</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">A</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/todo'">B</a>
      </li>
    </ul>
    <span class="fill-remaining-space"></span>
    <ul class="navbar-nav ml-auto">
      <li *ngIf="!authService.isLoggedIn" class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect [routerLink]="'/sign-in'">Login</a>
      </li>
      <li *ngIf="authService.isLoggedIn" class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect (click)="this.authService.signOut()">Logout</a>
      </li>
    </ul>
  </links>
</mdb-navbar>

我尝试将 sticky-top 添加为 Sideclass，当固定内容位于 router-outlet 内时，这似乎改善了行为。但是，一旦我导航到一个组件，该组件将 table 之类的动态内容提供给 router-outlet，它就会再次发生，如下所示：

知道如何防止导航栏变大吗？谢谢！

Answer 1

这似乎是组件中的错误，但我找到了解决方法。显然，注入导航的 div 具有一种样式，用于在下拉菜单处于活动状态时控制高度。这个高度只有在主动下拉的情况下才会增加，但在我的例子中它偶尔会增加。所以我用这个 CSS 来限制导航栏不处于下拉模式时的最大高度：

:host ::ng-deep mdb-navbar nav div :not(.show) {
    max-height: 40px !important;
}

mdb 导航栏保持翻转高度

mdb navbar keeps flipping height

css

angular

mdbootstrap