html - 适用于巨型机头的Bootstrap 3网格列

我的网站顶部有一个jumbotron，它有一个背景图像，当我调整浏览器窗口的大小时，背景图像的大小会很小。
我有另一个背景图像，它位于jumbotron背景图像之上。我使用position:relative为叠加图像设置了不同的断点；并将适当的像素量传递给top、left、width和height样式。
我这样做的原因是，随着web浏览器大小的减小，覆盖图像需要减小，而我使用top和left的原因是，我希望覆盖图像的底部与jumbotron背景图像的底部在该断点处对齐。
我知道，如果我将叠加图像设置为使用.make sm column（5）和适当的偏移量，它可能会起作用，但我无法将叠加图像的底部与jumbotron背景图像的底部对齐。
html示例：

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

css只是将背景图像和位置设置为相对，对于每个断点，它设置图像的顶部、左侧、高度和宽度，我目前不使用。为覆盖设置sm列或偏移。在jumbotron上还有其他的覆盖和文本div，但是我想只要问一下这个问题，就会让我朝着这个方向前进，并允许我对覆盖jumbotron的其他元素应用相同的方法。
如图所示，你可以看到我希望它排成一行
我觉得在这种情况下，我没有利用自助，任何指导都是感激的，谢谢。

最佳答案

有一些不同的方法，一种常见的方法是在父对象上设置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>

关于html - 适用于巨型机头的Bootstrap 3网格列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21001302/