html – Bootstrap jumbotron全景和高度的窗口与背景图像
发布时间:2020-12-14 19:34:36 所属栏目:资源 来源:网络整理
导读:我在网站上有一个bootstrap jumbotron,我想知道如何使屏幕的全宽和高度,或至少触摸导航栏,因为jumbotron和导航栏之间有差距. 到目前为止,我在“jumbotron”类中有一个“容器”类,使其没有圆角的屏幕的全宽,但是我如何拥有它,所以它将是设备的窗口的全宽和高
我在网站上有一个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全宽 Bootstrap’s documentation说:
所以基本上 <div class="jumbotron"> <div class="container"> ... </div> </div> 使jumbotron充分的高 我不知道这将适合您的项目,但您可以尝试像: .jumbotron{ height: 100vh; } *一个很好的知道:vh表示视口高度 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |