1

下面是一个带有引导程序 4 的 Html 代码。它有一个固定的页眉和页脚，中间有可滚动的引导卡。滚动时，一些卡片隐藏了标题。如何使卡片在标题“后面”滚动？

 <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>

在这里看到它的作用

4

2 回答 2

0

您可以使用z-index标题。

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

添加到您的样式或 CSS

header{
z-index:99;
}
于 2020-12-03T13:35:58.200 回答
0

您没有以正确的方式使用引导程序。对于页眉和页脚，使用nav引导程序提供的 bar 而不是headerand 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

于 2020-12-03T13:38:36.930 回答