Angular5 和 Bootstrap4 导航栏置顶答案

【问题标题】：Angular5 and Bootstrap4 NavBar sticky-topAngular5 和 Bootstrap4 导航栏置顶
【发布时间】：2017-12-20 21:01:18
【问题描述】：

仅当导航栏是

的直接子级时，引导导航栏位置“置顶”才有效

<body>
 <header class="sticky-top">
    <nav class="navbar navbar-light bg-light p-0"> 
        ... 
    </nav>
 </header>
</body>

或

<body>
 <nav class="navbar sticky-top navbar-light bg-light p-0">
    ...
 </nav>
 ...
</body>

我有这个代码：

index.html

<body>
 <app-root></app-root>
</body>

app.component.html

<app-top-navigation></app-top-navigation>
<router-outlet></router-outlet>
<app-footer></app-footer>

topNavigation.component.html

<nav dir="ltr" class="navbar navbar-expand-lg navbar-dark bg-dark sticky-
top">
 ...
</nav>

而且导航栏不粘，表现得像固定顶部。如果我写：

index.html

<body>
 <app-top-navigation class="sticky-top"></app-top-navigation>
 <app-root></app-root>
</body>

Angular 看不到它。如何让导航栏保持粘性？

【问题讨论】：

【解决方案1】：

只需将sticky-top 和d-block 类添加到您的app-top-navigation 标签：

app.component.html

<app-top-navigation class="sticky-top d-block"></app-top-navigation>
<router-outlet></router-outlet>
<app-footer></app-footer>

【讨论】：