Bootstrap jumbotron全宽和带背景图像的窗口高度答案

【问题标题】：Bootstrap jumbotron full width and height of window with background imageBootstrap jumbotron全宽和带背景图像的窗口高度
【发布时间】：2015-10-20 14:14:48
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

仅使用两个 css 类，无需自定义 css 即可完全实现

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

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

vh-100 表示视口高度 100%，mb-0 表示边距按钮 0

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

【讨论】：

【解决方案2】：

我最近遇到了这个问题，有一段时间没有任何帮助。 jumbotron 在按钮处留了一个空格，图像没有到达页脚。

这个解决方案很接近，但在某些页面上不起作用

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

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

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

希望对大家有所帮助

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以使用导航栏下方的 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%;
}

希望这会有所帮助:)

【讨论】：

【解决方案5】：

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

<div class="jumbotron jumbotron-fluid">

会使 jumbotron 全宽。

【讨论】：

这不是一个有效的解决方案。jumbotron-fluid 使它像问题要求的那样全宽而不是全高。

【解决方案6】：

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

移除导航栏下多余的空间

默认引导导航栏有一个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

【讨论】：