css - 无法将导航栏更改为固定位置

我有一个斜角的Web应用程序，并且我试图找出导致div class container居中并具有指定宽度的大小的原因。我认为它在引导文件中，因为我似乎找不到并更改它。导航栏当前位于容器的中间，并且不在固定位置。想知道如何解决这个问题。

这是我目前对nav.component.html的代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container">
    <a class="navbar-brand">Kumo</a>

      <ul class="navbar-nav mr-auto">
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['/home']" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['/log-in']" mdbWavesEffect>Login</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link waves-light" [routerLink]="['/sign-up']" mdbWavesEffect>Register</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
            <a class="nav-link waves-light" [routerLink]="['/order']" mdbWavesEffect>Order</a>
          </li>
        <li class="nav-item" routerLinkActive="active">
            <a class="nav-link waves-light" [routerLink]="['/cart']" mdbWavesEffect>Cart</a>
          </li>
         <li class="nav-item" routerLinkActive="active" style="float:right" *ngIf="role == '2'" >
            <a class="nav-link waves-light" [routerLink]="['/store']" mdbWavesEffect>Store</a>
        </li>
        <li class="nav-item" routerLinkActive="active" style="float:right" *ngIf="role == '1'" >
          <a class="nav-link waves-light" [routerLink]="['/profile']" mdbWavesEffect>Profile</a>
      </li>
      </ul>
    </div>
  </nav>

我能找到的最接近的解决方案是将nav.component.css更改为此，但是这里的问题是，无论<router-outlet>中的什么，它都覆盖了导航栏。

.navbar {
     position: fixed;
     left: 0px; }

我的app.component.html代码具有以下内容：

<div class="container">
  <app-nav></app-nav>
  <router-outlet></router-outlet>
</div>

最佳答案

有两种解决方案，静态和动态边距，当您说position-fixed时，需要将margin应用于元素，以便它们可以显示在固定元素下方。

静态方法的问题是，如果height的navbar有所更改，则它将无法工作。

1.静态margin-top（简单）

app.component.html

<div class="container" style="margin-top: 62px">
  <app-nav (navHeight)="onNavHeight($event)"></app-nav>
    <router-outlet></router-outlet>
</div>

2.动态margin-top（Demo）

在这种方法中，首先计算导航栏的高度，然后使用@Output将导航栏的高度通知给父对象

获取navbar的引用，以便可以使用height。

nav.component.html

<nav #navbar class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
...

从引用中获取height，并将height通知家长。

导航组件

export class NavComponent implements OnInit {

  @Output() navHeight: EventEmitter<number> = new EventEmitter();
  @ViewChild('navbar') navbar: ElementRef;

  ngOnInit() {
    this.navHeight.next(this.navbar.nativeElement.offsetHeight);
  }
}

添加事件，以便可以捕获事件。

app.component.html

<div class="container" [style.margin-top.px]="navbarTopMargin">
  <app-nav (navHeight)="onNavHeight($event)"></app-nav>
    <router-outlet></router-outlet>
</div>

从事件获取值，并用接收到的值更新margin-top变量。

app.component.ts

export class AppComponent  {

  navbarTopMargin: number = 0;

  onNavHeight(topMargin: number) {
    console.log(topMargin);
    this.navbarTopMargin = topMargin;
  }
}

关于css - 无法将导航栏更改为固定位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59441367/