文章/答案/技术大牛

发布

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

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

Stack Overflow用户

提问于 2020-12-03 13: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 13: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 13:35:58

header可以使用z-index。

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

添加到您的样式或css

header{
z-index:99;
}

票数 0

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

原文链接：

https://stackoverflow.com/questions/65126957

复制

从贝叶斯方法谈到贝叶斯网络语言_深度贝叶斯网络

机器学习神经网络深度学习人工智能 http

事实上，介绍贝叶斯定理、贝叶斯方法、贝叶斯推断的资料、书籍不少，比如《数理统计学简史》，以及《统计决策论及贝叶斯分析 James O.Berger著》等等，然介绍贝叶斯网络的中文资料则非常少，中文书籍总共也没几本，有的多是英文资料，但初学者一上来就扔给他一堆英文论文，因无基础和语言的障碍而读得异常吃力导致无法继续读下去则是非常可惜的（当然，有了一定的基础后，便可阅读更多的英文资料）。

全栈程序员站长

2022/11/02

6450

机器学习（15）——贝叶斯网络贝叶斯小结

其他

DC童生

2018/04/27

1.9K0

R语言︱贝叶斯网络语言实现及与朴素贝叶斯区别（笔记）

机器学习神经网络深度学习人工智能分类算法

悟乙己

2019/05/26

3.3K0

贝叶斯思想概述：从贝叶斯定理到贝叶斯网络

其他

翻译 | AI科技大本营(ID：rgznai100) 参与 | 刘畅假设世界上存在一种非常罕见的疾病，你患有这种疾病的几率只有千分之一。你想知道你是否被感染了，所以你做了一个99％准确的测试...且测试的结果是阳性的(译者注:阳性是感染了病毒的情况)！那么你到底有多确定你真的被感染了？怎么让疾病的第二次测试结果告诉你，你确实被感染了？对于上述问题，如果你不想做所有的数学计算，而是更喜欢画一个网络结构来帮助自己更好地理解，那这篇文章是非常适合你的！第一个测试由于它是一种非常罕见的疾病（千分之一

AI科技大本营

2018/04/27

1K0

R语言中贝叶斯网络（BN）、动态贝叶斯网络、线性模型分析错颌畸形数据

编程算法机器学习神经网络深度学习人工智能

贝叶斯网络（BN）是一种基于有向无环图的概率模型，它描述了一组变量及其相互之间的条件依赖性。它是一个图形模型，我们可以很容易地检查变量的条件依赖性和它们在图中的方向。在这篇文章中，我将简要地学习如何用R来使用贝叶斯网络。

拓端

2021/07/16

2.9K0

【机器学习】--贝叶斯网络

机器学习编程算法

LhWorld哥陪你聊算法

2018/09/13

9400

R 语言朴素贝叶斯算法

r 语言编程算法

朴素贝叶斯算法学习与分类算法 1 训练数据 X1<-c(1,1,1,1,1,2,2,2,2,2,3,3,3,3,3) X2<-c("S","M","M","S","S","S","M","M","L

张泽旭

2018/12/10

6250

贝叶斯

机器学习神经网络深度学习人工智能编程算法

设A,B是两个事件，且P(B)>0,则在事件B发生的条件下，事件A发生的条件概率（conditional probability)为：

用户9854323

2022/06/25

1K0

R-CNN算法_贝叶斯R语言

https 网络安全机器学习神经网络深度学习

首先进行数据处理，然后输入backbone得到特征图，然后进入RPN中提取候选区域roi，然后再ROI Align提取特争，然后送入BBox Head进行进一步的回归和分类。主要介绍方面

全栈程序员站长

2022/10/29

2840

机器学习之贝叶斯网络

机器学习神经网络深度学习人工智能编程算法

前面学习了朴素贝叶斯的原理，并且利用朴素贝叶斯原理对西瓜数据集3.0数据集进行了分类：朴素贝叶斯“朴素”在哪里？，今天我们更进一步，来探讨一下贝叶斯网络的原理以及应用。

Cyril-KI

2022/07/29

1.8K0

网络-贝叶斯可视化

编程算法机器学习神经网络深度学习人工智能

贝叶斯网络是对朴素贝叶斯的一种补充。叶斯网络是贝叶斯原理和图论相结合，建立起一种基于概率推理的数学模型,对于解决复杂的不确定性和关联性问题有很强的优势。朴素贝叶斯的假设前提有两个第一个为：各特征彼此独立；第二个为且对被解释变量的影响一致，不能进行变量筛选。但是我们知道：各特征彼此独立的假设在很多场景是很能成立或难以验证的。叶斯网络在特征彼此不独立情况下具有更具普遍的意义，可进行建模。要求各变量都是离散型的。贝叶斯网络基本概念有两个：引入了一个有向无环图（Directed Acyclic Graph）和一个条件概率表集合。

herain

2022/04/27

6510

数据挖掘神经网络决策树互联网事件

① 原理 : 基于统计学方法贝叶斯 ( Bayes ) 理论 , 预测样本某个属性的分类概率 ;

韩曙亮

2023/03/27

1.7K0

贝叶斯估计

机器学习神经网络深度学习人工智能

在概率论与数理统计领域中，对于一个未知参数的分布我们往往可以采用生成一批观测数据、通过这批观测数据做参数估计的做法来估计参数。最常用的有最大似然估计(MLP)、矩估计、最大后验估计(MAP)、贝叶斯估计等。

为为为什么

2022/08/06

9420

贝叶斯估计

贝叶斯估计是贝叶斯学派估计未知参数的主要方法，与频率学派相比，贝叶斯学派最主要的观点就是未知量是一个随机变量，在进行抽样分布之前，未知量有自己的分布函数，即所谓的先验分布。而贝叶斯估计也就是通过引入未知量的先验分布来将先验信息和传统频率学派的总体信息和样本信息结合起来，得到一个未知量的后验分布，然后对未知量进行统计推断。

爱编程的小明

2023/03/19

8970

算法——贝叶斯

编程算法

简介学过概率理论的人都知道条件概率的公式：P(AB)=P(A)P(B|A)=P(B)P(A|B)；即事件A和事件B同时发生的概率等于在发生A的条件下B发生的概率乘以A的概率。由条件概率公式推导出贝叶斯公式：P(B|A)=P(A|B)P(B)/P(A)；即,已知P(A|B)，P(A)和P(B)可以计算出P(B|A)。假设B是由相互独立的事件组成的概率空间{B1,b2，...bn}。则P(A)可以用全概率公式展开：P(A)=P （A|B1)P(B1)+P（A|B2)P(B2)+..P（A|Bn)P(Bn)。

cloudskyme

2018/03/20

1.1K0

贝叶斯学习

机器学习神经网络深度学习人工智能

贝叶斯学习（Baysian Learning）是基于贝叶斯定理的一个推断方法。其考虑的场景为：我们观测到一个数据集合，其服从条件分布（我们称为模型分布），其中模型参数是未知的（当看作是的函数时，也被称为模型似然）。尽管是未知的，但先验分布往往是已知的，而我们要求解的便是。

hotarugali

2022/04/25

1.3K0

朴素贝叶斯

机器学习神经网络深度学习人工智能

叶斯分类器是一种概率框架下的统计学习分类器，对分类任务而言，假设在相关概率都已知的情况下，贝叶斯分类器考虑如何基于这些概率为样本判定最优的类标。在开始介绍贝叶斯决策论之前，我们首先来回顾下概率论委员会常委--贝叶斯公式。

zeekling

2022/06/17

7870

[机器学习实战札记] 朴素贝叶斯

编程算法机器学习神经网络深度学习人工智能

《概率论》（当年我学习的课程为《概率论与数理统计》，涵盖了概率论与统计学）应该是每个理工科大学生都要学习的课程，不知道有多少同学和我一样，学得一头雾水。悲催的是，考研的时候又学习了一遍，依然不着门路，靠死记硬背过关。好在后面的学习和工作生涯中，再没有和它打过照面，直到最近开始接触机器学习。

云水木石

2019/07/01

6840

朴素贝叶斯

机器学习神经网络深度学习人工智能

假设现在有一些评论数据，需要识别出这篇文本属于正向评论还是负面评论，也就是对文本进行分类。用数学语言描述就是：假设已经有分好类的N篇文档：(d1,c1)、(d2,c2)、(d3,c3)……(dn,cn)，di表示第i篇文档，ci表示第i个类别。目标是：寻找一个分类器，这个分类器能够：当丢给它一篇新文档d，它就输出d（最有可能）属于哪个类别c。

故事尾音

2019/12/18

6810

[机器学习算法]朴素贝叶斯

机器学习神经网络深度学习人工智能

表示样本空间中各类别样本所占的比例，根据大数定律，当训练集包含充分的独立同分布样本时，因此

TOMOCAT

2020/06/09

7850

相似问题

贝叶斯网络

带R的贝叶斯网络

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

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

回答 2

Stack Overflow用户

Stack Overflow用户

贝叶斯网络

贝叶斯网络

贝叶斯网络

贝叶斯网络

带R的贝叶斯网络

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

贝叶斯网络

贝叶斯网络

贝叶斯网络

贝叶斯网络

带R的贝叶斯网络

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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