gpt4 book ai didi

Angular 5 和 Bootstrap 4 导航栏粘顶

转载 作者:行者123 更新时间:2023-12-02 13:46:40 25 4
gpt4 key购买 nike

引导导航栏位置“粘性顶部”仅在导航栏是

的直接子级时才有效
<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>

https://github.com/twbs/bootstrap/issues/21919

我有这个代码:

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 没有看到它。如何使导航栏具有粘性?

最佳答案

只需将 sticky-topd-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>

<强> Ng-run Example

关于Angular 5 和 Bootstrap 4 导航栏粘顶,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47914285/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com