窗口Bootstrap jumbotron全宽度和高度与背景图象的

Question

我在网站上有一个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>

Answer 1

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

删除导航栏下的多余空间

默认的bootstrap导航栏有一个margin-bottom: 20px,你想要覆盖它:

.navbar {
    margin-bottom: 0px;
}

使jumbotron全宽

Bootstrap的文档说:

为了使jumbotron全宽,没有圆角,将它放在所有.container之外,而是在其中添加.container.

所以基本上:

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

让jumbotron充满活力

我不确定它会如何干净地适合您的项目,但您可以尝试以下方法:

.jumbotron{
    height: 100vh;
}

*一个有用的知识:vh代表viewport height

Answer 2

您可以通过使用导航栏正下方的巨型加速器来实现此目的。您应该在容器或div内使用巨型机，其类别为：

<div class="container-full-bg">

使用“ full-bg”将增加超大屏幕的宽度以适合页面。为了增加高度，我在容器类中使用了文本，或者只是使用了<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>

现在要在超大屏幕上正确显示图像，请使用background-size作为封面，将css文件自定义为：

.jumbotron{
    background-image: url(show-copy.jpg) ;
    background-size: cover; 
    height: 100%;
    width: 100%;
}

希望这可以帮助 ：）