gpt4 book ai didi

css - 如何在 bootstrap 4 中使打开的 Accordion 标题变粘?

转载 作者:行者123 更新时间:2023-12-05 06:58:48 26 4
gpt4 key购买 nike

有一个 BS4 Accordion ,当用户向下滚动时,希望保持打开的标题在顶部,所以 Accordion 打开的标题的粘性行为

实际的方法是行不通的:

#accordion .card-header BUTTON:not(.collapsed) {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

标题一直越过屏幕不可见

代码:

<style>
#accordion .card-header BUTTON:not(.collapsed) {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
</style>

<div id="accordion" class="groups">
<div class="card">
<div class="card-header d-block d-md-none m-0 p-0">
<h2 class="mb-0">
<button
class="btn btn-link btn-block p-2"
data-toggle="collapse"
data-target="'#group-1"
aria-controls="'#group-1"
>title</button>
</h2>
</div>

<div id="group-1" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
...
</div>
</div>
</div>

最佳答案

尝试给 z-index: 1000;在 css 中到 #accordion .card-header BUTTON:not(.collapsed)

关于css - 如何在 bootstrap 4 中使打开的 Accordion 标题变粘?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64535758/

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