文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap 4卡在滚动时隐藏固定标题

问Bootstrap 4卡在滚动时隐藏固定标题
EN

Stack Overflow用户

提问于 2020-12-03 21:30:57

回答 2查看 543关注 0票数 0

下面是一个带有bootstrap 4的Html代码。它有一个固定的页眉和页脚，中间有可滚动的bootstrap Cards。滚动时，一些卡片会隐藏标题。如何让卡片滚动到标题后面？

 <header style="position: fixed; left: 0; top: 0; width: 100%;" class="bg-info text-center">header</header>
 <br><br>
 
<div class="container">
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div> 
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div> 
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>

<footer style="position: fixed; left:0; bottom:0; width:100%;" class="bg-info text-center">footer</footer>

see it in action here

html

css

bootstrap-4

scroll

bootstrap-cards

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-03 21:38:37

您没有以正确的方式使用引导。对于页眉和页脚，使用bootstrap提供的nav栏，而不是header和footer。

对于固定标题：-

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

对于固定页脚：-

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

参考资料：

https://getbootstrap.com/docs/4.0/components/navbar/#placement

票数 0

Stack Overflow用户

发布于 2020-12-03 21:35:58

header可以使用z-index。

你可以给出任何你想要的数字，这个数字将使元素在z索引上移动。

添加到您的样式或css

header{
z-index:99;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65126957

复制

相似问题

问Bootstrap 4卡在滚动时隐藏固定标题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4卡在滚动时隐藏固定标题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4卡在滚动时隐藏固定标题
EN