Html Bootstrap jumbotron 全宽和带背景图像的窗口高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31703153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap jumbotron full width and height of window with background image
提问by rharper
I've got a bootstrap jumbotron on a website, and I was wondering how I would make it the full width and height of the screen, or at least touching the nav bar, as there is a gap between the jumbotron and the navbar.
我在网站上有一个 bootstrap jumbotron，我想知道如何使它成为屏幕的整个宽度和高度，或者至少触摸导航栏，因为 jumbotron 和导航栏之间存在间隙。
So far, I have a "container" class inside the "jumbotron" class to make it full width of the screen without rounded corners, but how would I have it so it would be the full width and height of the device's window until someone scrolls down?
到目前为止，我在“jumbotron”类中有一个“container”类，以使其在没有圆角的情况下成为屏幕的全宽，但是我将如何拥有它，以便在有人滚动之前它是设备窗口的全宽和高度下？
So far this is what I've got:
到目前为止，这就是我所拥有的：
<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>
回答by MrHaze
So we have 3 issues here:
所以我们这里有3个问题：
Remove excess space under navbar
删除导航栏下的多余空间
The default bootstrap navbar has a margin-bottom: 20px, you want to override that like this:
默认的引导导航栏有一个margin-bottom: 20px，你想像这样覆盖它：
.navbar {
margin-bottom: 0px;
}
Make jumbotron full width
使 jumbotron 全宽
Bootstrap's documentationsays:
To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.
要使 jumbotron 全宽且没有圆角，请将其放在所有 .containers 之外，而是在其中添加一个 .container。
So basically:
所以基本上：
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Make jumbotron full hight
使 jumbotron 全高
I'm not sure how cleanly this will fit into your project, but you can try something like:
我不确定这是否适合您的项目，但您可以尝试以下操作：
.jumbotron{
height: 100vh;
}
*A good-to-know: The vhstands for viewport height
*注意事项：vh代表viewport height
回答by Swapnil Sourabh
You can achieve this by using the jumbotron just beneath the navbar. You should use the jumbotron inside a container or div, with its class as:
您可以通过使用导航栏下方的超大屏幕来实现这一点。您应该在容器或 div 中使用 jumbotron，其类为：
<div class="container-full-bg">
Using 'full-bg' will increase the width of jumbotron to fit the page. In order to increase the height, I used the text within the container class or simply used <br>tags to increase the jumbotron height accordingly per my needs. A sample:
使用 'full-bg' 将增加 jumbotron 的宽度以适合页面。为了增加高度，我使用了容器类中的文本或简单地使用<br>标签来根据我的需要相应地增加大屏幕高度。一个样品：
<div class="container-full-bg"> <!-- increased the jumbotron width -->
<div class="jumbotron ">
<div class="container">
<br><br><br>
<p> Write here <p>
<br><br><br><br>
</div>
</div>
</div>
Now to display the image properly in the jumbotron, use background-size as cover,customizing the css file as:
现在要在 jumbotron 中正确显示图像，使用 background-size 作为封面，将 css 文件自定义为：
.jumbotron{
background-image: url(show-copy.jpg) ;
background-size: cover;
height: 100%;
width: 100%;
}
Hope this helps :)
希望这可以帮助 ：）
回答by Srikanth Gopi
<div class="jumbotron" style="height:100vh;"></div>
This should give you a full width and full height jumbotron
这应该给你一个全宽和全高的大屏幕
回答by Mike Grote
There are a number of ways to achieve what you are trying here. I know this thread is a bit old, but....
有多种方法可以实现您在此处尝试的目标。我知道这个线程有点旧，但是......
<div class="jumbotron jumbotron-fluid">
would make the jumbotron full width.
将使大屏幕全宽。
