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

Question

我有一个 angular 的网络应用程序，我想弄清楚是什么排除了 div class container位于中心并具有指定的宽度。我假设它在 Bootstrap 文件中，因为我似乎无法找到它并更改它。导航栏目前在容器中间，位置不固定。想知道如何解决这个问题。

这是我目前为 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>

Answer 1

这个问题有两种解决方案，静态和动态边距，当你说position-fixed时，你需要对元素应用margin，这样它们才能出现在下面固定元素。

静态方法的问题在于，如果 navbar 的 height 以某种方式发生变化，那么它将无法工作。

<强>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">
...

从引用中获取高度并通知父级高度。

nav.component.ts

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;
  }
}