在组件中使用时，粘滞导航栏在bootstrap-vue中不起作用
在组件中使用时，粘滞导航栏在bootstrap-vue中不起作用
提问于 2019-02-17 17:55:50
我正在使用bootstrap-vue，正如你在jsfiddle中看到的，粘滞属性在导航栏中使用时工作正常。
问题是，当我将这个导航栏移动到一个单独的组件并调用它时，粘滞属性无法正常工作。
<b-navbar toggleable="lg" type="dark" variant="info" sticky>
<b-navbar-brand href="#">NavBar</b-navbar-brand>
</b-navbar>
fixed="top"在用作组件时仍可正常工作。
<b-navbar toggleable="lg" type="dark" variant="info" fixed="top">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
</b-navbar>
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-14 07:56:50
并非所有web浏览器都支持CSS position: sticky。不过，使用最新的Chrome浏览器，你的小提琴对我来说还是不错的。
Stack Overflow用户
发布于 2020-02-24 02:12:07
我刚刚遇到了同样的问题。这并不是因为浏览器不兼容的问题。我的导航栏被包装在另一个逻辑组件中，sticky在那里不起作用。
将下面的css添加到包装组件就成功了：
.wrapper {
position: sticky;
top: 0;
}您可能需要检查一下如何让css在除chrome之外的其他浏览器上工作。
Stack Overflow用户
发布于 2021-07-11 16:13:30
<div class="fixed-top"><b-navbar></b-navbar></div>您可以使用bootstrap.css中已经存在的类fixed-top
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54732031
复制相关文章
相似问题