我在网站上有一个bootstrap jumbotron,我想知道如何使屏幕的全宽和高度,或至少触摸导航栏,因为jumbotron和导航栏之间有差距.
到目前为止,我在“jumbotron”类中有一个“容器”类,使其没有圆角的屏幕的全宽,但是我如何拥有它,所以它将是设备的窗口的全宽和高度,直到有人滚动下？
到目前为止,这是我所得到的：
<div class="jumbotron">
<div class="container">
<center><h1>Hello,World!</h1>
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Curabitur ligula mauris,iaculis quis tortor eget,ultricies mollis nisi.
</p>
<a class="btn btn-default" href="#">Button 1</a>
<!-- <a class="btn btn-info" href="#">Button 2</a> -->
</center>
</div>
</div>
解决方法
所以我们在这里有3个问题：
删除导航栏下的多余空间
默认引导导航栏的margin-bottom：20px,你想要这样重写：
.navbar {
margin-bottom: 0px;
}
使jumbotron全宽
To make the jumbotron full width,and without rounded corners,place
it outside all .containers and instead add a .container within.
所以基本上
<div class="jumbotron">
<div class="container">
...
</div>
</div>
使jumbotron充分的高
我不知道这将适合您的项目,但您可以尝试像：
.jumbotron{
height: 100vh;
}
*一个很好的知道：vh表示视口高度
