html - Bootstrap jumbotron 全宽和带背景图像的窗口高度

Question

我在一个网站上有一个 bootstrap jumbotron，我想知道如何让它成为屏幕的整个宽度和高度，或者至少触摸导航栏，因为有超大屏幕和导航栏之间的间隙。

到目前为止，我在“jumbotron”类中有一个“container”类，以使其在没有圆 Angular 的情况下占据屏幕的全宽，但我将如何拥有它，使其成为设备窗口的全宽和高度直到有人向下滚动？

到目前为止，这是我得到的:

<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>

Answer 1

所以我们这里有 3 个问题:

移除导航栏下的多余空间

默认的 Bootstrap 导航栏有一个 margin-bottom: 20px，你想像这样覆盖它:

.navbar {
    margin-bottom: 0px;
}

使超大屏幕全宽

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 class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

使超大屏幕全高

我不确定这是否适合您的元素，但您可以尝试类似的方法:

.jumbotron{
    height: 100vh;
}

*小提示:vh 代表viewport height