增加Bootstrap Jumbotron的高度,但保持响应

Question

我一直在玩Bootstrap的Jumbotron来放置背景图像.非常简单:

.jumbotron
{
    background: url('path/to/images/banner.jpg') no-repeat center center; 
    background-size: cover;
}

和

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

它看起来很棒,反应灵敏.然而,Jumbotron只有它里面的内容一样大 - 我的内容很少.因此,它比我想要的要薄得多,我想在保持响应性的同时增加其默认高度.所以,例如,像这样的东西不起作用:

<div class="jumbotron">
    <div class="container" style="height: 600px;">...</div>
</div>

这是正确的高度,但图像不再响应.我一直在研究可用的各种mixins /变量,希望有一些东西可以弹出,我可以利用,但我没有运气.

Answer 1

我用填充来做:

.jumbotron {
    ...
    padding: 5em inherit;
}

通过使用相对单位,它可以扩展

小提琴演示

或者,使用最小高度:

.jumbotron {
    ...
    min-height: 300px;
}

小提琴演示

这允许元素在需要时扩展.