html - 用于超大屏幕标题的 Bootstrap 3 网格列

Question

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

我有另一个背景图像位于超大屏幕背景图像之上。我一直在使用 position: relative; 为该覆盖图像设置不同的断点；并将适当的像素数量传递给顶部、左侧、宽度和高度样式。

我这样做的原因是因为叠加图像需要随着网络浏览器尺寸的减小而减小，而我使用 top 和 left 的原因是因为我想让叠加图像的底部与该断点处的超大屏幕背景图像。

我知道如果我将叠加图像设置为使用 .make-sm-column(5) 和适当的偏移量，它可能会起作用，但我无法将叠加图像的底部与超大屏幕的底部对齐背景图片。

示例 html:

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

css 只是将背景图像和位置设置为相对，并且对于每个断点，它设置图像的顶部、左侧、高度、宽度，我目前不使用 .make-sm-column 或偏移量进行叠加.超大屏幕上还有其他叠加层和文本 div，但我认为只要问这个问题就会让我朝着这个方向前进，并允许我将相同的内容应用于覆盖超大屏幕的其他元素。

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

我觉得在这种情况下我没有利用 bootstrap，欢迎任何指导，谢谢。

Answer 1

有一些不同的方式，一种常见的方式是在父级上设置position:relative;，在子级上设置position:absolute;，将子级定位在底部设置 bottom:0; 给 child 。

所以:

CSS:

#jumbotron {
    position: relative;
}

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

HTML:

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