用于jumbotron标题的Bootstrap 3网格列

Question

我的网站顶部有一个超大屏幕，背景图片在调整浏览器窗口大小时调整得很好。

我有另一个背景图像，它位于jumbotron背景图像的顶部。我一直在使用position：relative;为覆盖图像设置不同的断点;并将适当的像素数量传递给顶部，左侧，宽度和高度样式。

我之所以这样做，是因为随着网页浏览器尺寸的减小，覆盖的图像需要减少，我使用顶部和左边的原因是因为我希望覆盖图像的底部与底部相对应那个断点处的jumbotron背景图片。

我知道如果我将覆盖图像设置为使用.make-sm-column（5）和适当的偏移量，它可能会起作用，但是我无法将覆盖图像的底部衬到jumbotron的底部背景图片。

示例html：

<div id="jumbotron">
  <div id="jumbotron-man"></div>
</div>

css只是将背景图像和位置设置为相对，并且对于每个断点，它设置图像的顶部，左侧，高度，宽度，我目前不使用.make-sm-column或覆盖偏移。在jumbotron上还有其他叠加和文本div，但我想只是询问这会让我朝这个方向发展，并允许我将其应用到覆盖jumbotron的其他元素上。

如图所示，您可以看到我希望它如何排列

我觉得在这种情况下我没有利用自助训练，感谢任何指导，谢谢。

Answer 1

有一些不同的方法，一种常见的方法是在父项上设置position:relative;，在子项上设置position:absolute;，将子项置于子项的底部bottom:0;。

所以：

CSS：

#jumbotron {
    position: relative;
}

#jumbotron-man {
    position: absolute;
    bottom: 0;
}

HTML：

<div id="jumbotron">
  <div id="jumbotron-man"></div>
</div>