Question

我试图在jumbotron中显示图像（1920x800px）作为背景。

HTML：

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

CSS：

.bg {
  background: url('../images/ac-unity.jpg');
  background-size: cover;
}

.jumbotron {
padding: 30px 15px;
margin-bottom: 30px;
color: inherit;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

如所见here（托管在我的学校服务器上），由于容器的内容，图像的高度未完全显示。通过为.bg指定高度，我得到完整的图像，但图像不再响应。我怎样才能确保jumbotron能够显示图像的整个高度，但仍能对移动设备做出响应？

此致

Answer 1

尝试将jumbotron放入行和容器中：

<div class="row">
  <div class="container">
    <div class="jumbotron bg">
    </div>
  </div>
</div>

Bootstrap Jumbotron背景图像高度问题

1 个答案: