Question

我在网站上有一个bootstrap jumbotron，我想知道如何使它成为屏幕的全宽和高度，或者至少触及导航栏，在jumbotron和导航栏之间存在差距。

到目前为止，我有一个＆＃34;容器＆＃34; ＆＃34; jumbotron＆＃34;使得它没有圆角的屏幕的全宽，但我怎么能拥有它所以它是设备窗口的完整宽度和高度直到有人向下滚动？

到目前为止，这就是我所拥有的：

<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's documentation说：

要使jumbotron全宽，没有圆角，请放置它在所有.containers之外，而是在其中添加.container。

基本上是这样的：

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

让jumbotron充满活力

我不确定这适合您的项目有多干净，但您可以尝试以下方式：

.jumbotron{
    height: 100vh;
}

*知情人士：vh代表viewport height

Answer 2

您可以使用导航栏下方的jumbotron来实现此目的。您应该在容器或div中使用jumbotron，其类如下：

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

使用'full-bg'会增加jumbotron的宽度以适合页面。为了增加高度，我使用了容器类中的文本，或者只使用<br>标签来根据我的需要相应地增加jumbotron高度。样本：

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

现在要在jumbotron中正确显示图像，使用background-size作为封面，将css文件自定义为：

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

希望这会有所帮助：）

Answer 3

<div class="jumbotron" style="height:100vh;"></div>

这应该给你一个全宽和全高的jumbotron

Answer 4

我最近对此有疑问，一段时间没有任何帮助。超大屏幕在按钮处留了一个空格，图像没有到达页脚。

此解决方案已结束，但在某些页面上无效

    .jumbotron {
      height: 100vh;
      ...
    }

所以我找到了这个简单的解决方案：

    .jumbotron {
      min-height: 100vh;
      ...
    }

我希望这对某些人有帮助

Answer 5

有很多方法可以实现您在这里尝试的目标。我知道这个帖子有点老了，但是......

<div class="jumbotron jumbotron-fluid">

会使jumbotron全宽。

Answer 6

使用两个CSS类无需自定义CSS完全可以实现

<div class="jumbotron vh-100 mb-0">
    <div class="container">
        <!-- Your jumbotron here -->
    </div>
</div>

mb-0仅在您只有巨型飞轮并且不希望出现滚动条时才需要。

vh-100表示视口高度为100％，mb-0表示空白边距为0

请参见https://getbootstrap.com/docs/4.5/utilities/sizing/和https://getbootstrap.com/docs/4.5/utilities/spacing/

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

6 个答案:

删除导航栏下的多余空间

使jumbotron全宽

让jumbotron充满活力