导航栏：将导航栏固定在顶部时，我的组件也固定在顶部

Question

我与Angular合作进行个人项目。我想要一个顶部固定导航栏在中写入“ fixed-top”。导航栏是固定的，但问题是我的组件也固定在顶部，这是一个我不知道如何解决的大问题。您是否可以在屏幕上看到，我的组件电影列表也固定在顶部，因此导航栏隐藏了组件的顶部。这是所有组件/页面的问题。

[This is a screen of my app.] 1

这是我的导航栏模板

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
          <img src="../../assets/logo1.png" alt="">
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Search
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" routerLinkActive="active" routerLink="search/movie">Movie</a>
            <a class="dropdown-item" routerLinkActive="active" routerLink="search/tv-show">Tv Show</a>
          </div>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink="movies">Movies</a>
        </li>
        <li class="nav-item" routerLinkActive="active">
          <a class="nav-link"routerLink="tv-shows">Tv Shows</a>
        </li>
      </ul>
    </div>
</nav>

这是css

nav {
-webkit-box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
-moz-box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
box-shadow: 0px 5px 4px -1px rgba(173,161,173,1);
height: 60px;
width: 100%;
}

这是我的应用程序组件，称为导航栏

<app-header></app-header>
<router-outlet></router-outlet>

如果您有任何想法请帮助我。

谢谢

Answer 1

这里是问题：

<nav class=". . . fixed-top . . .">

您已指定fixed-top类。这意味着导航栏将在内容下方重叠。

您可以尝试删除该课程。或者，如果您要使用该特定类，请尝试添加填充：body { padding-top: 80px; }（80px或您发现的更适合显示的Web内容）。