This question already has an answer here:
Why is 'position: sticky' not working with Core UI's Bootstrap CSS
(1 个回答)
2年前关闭。
我正在尝试在右侧创建一个粘性侧边栏。侧边栏菜单位于网格列内。我使用
这是代码...
当用户向下滚动时,
https://codeply.com/go/9Nf6pOa7TN
(1 个回答)
2年前关闭。
我正在尝试在右侧创建一个粘性侧边栏。侧边栏菜单位于网格列内。我使用
sticky-top
类作为 shown in this question ,但它仍然不起作用。这是代码...
<div class="container min-vh-100 overflow-hidden">
<nav class="navbar navbar-light navbar-expand">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
</ul>
</nav>
<div class="row">
<div class="col-sm-8 content pt-4">
...
</div>
<div class="col-sm-4">
<div class="menu sticky-top p-3 bg-light">
<h5 class="text-primary">Sticky menu</h5>
<div class="nav flex-column">
<a href="#" class="nav-link pl-0">Menu 1</a>
<a href="#" class="nav-link pl-0">Menu 2</a>
<a href="#" class="nav-link pl-0">Menu 3</a>
</div>
</div>
</div>
</div>
</div>
代码:https://codeply.com/go/xwYPD1B1tk当用户向下滚动时,
menu
div 是我想粘在顶部的那个。 最佳答案
如果粘性元素的任何父容器使用 overflow:hidden
,则位置粘性将不起作用。从容器中删除 overflow-hidden
类允许 sticky-top
工作。
<div class="container min-vh-100">
<nav class="navbar navbar-light navbar-expand">
..
</nav>
<div class="row">
<div class="col-sm-8 content pt-4">
...
</div>
<div class="col-sm-4">
<div class="menu sticky-top p-3 bg-light">
<h5 class="text-primary">Sticky menu</h5>
<div class="nav flex-column">
...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/9Nf6pOa7TN
关于html - 侧边栏列上的 Bootstrap sticky-top 不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55538827/
10-12 00:58