html – Bootstrap jumbotron全景和高度的窗口与背景图像

概述我在网站上有一个bootstrap jumbotron,我想知道如何使屏幕的全宽和高度,或至少触摸导航栏,因为jumbotron和导航栏之间有差距. 到目前为止,我在“jumbotron”类中有一个“容器”类,使其没有圆角的屏幕的全宽,但是我如何拥有它,所以它将是设备的窗口的全宽和高度,直到有人滚动下？ 到目前为止,这是我所得到的： <div class="jumbotron"> <div 我在网站上有一个bootstrap jumbotron,我想知道如何使屏幕的全宽和高度,或至少触摸导航栏,因为jumbotron和导航栏之间有差距.

到目前为止,我在“jumbotron”类中有一个“容器”类,使其没有圆角的屏幕的全宽,但是我如何拥有它,所以它将是设备的窗口的全宽和高度,直到有人滚动下？

到目前为止,这是我所得到的：

<div >    <div >    <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  href="#">button 1</a>        <!-- <a  href="#">button 2</a> -->    </center>    </div></div>

解决方法 所以我们在这里有3个问题：

删除导航栏下的多余空间

默认引导导航栏的margin-bottom：20px,你想要这样重写：

.navbar {    margin-bottom: 0px;}

使jumbotron全宽

Bootstrap’s documentation说：

To make the jumbotron full wIDth,and without rounded corners,place
it outsIDe all .containers and instead add a .container within.

所以基本上

<div >  <div >    ...  </div></div>

使jumbotron充分的高

我不知道这将适合您的项目,但您可以尝试像：

.jumbotron{    height: 100vh;}

*一个很好的知道：vh表示视口高度

总结

以上是内存溢出为你收集整理的html – Bootstrap jumbotron全景和高度的窗口与背景图像全部内容，希望文章能够帮你解决html – Bootstrap jumbotron全景和高度的窗口与背景图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。