Bootstrap 3栅格列jumbotron标题

我在我的网站顶部有一个jumbotron，当调整浏览器窗口大小时，调整后的背景图像很好。Bootstrap 3栅格列jumbotron标题

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

我这样做的原因，是因为随着网页浏览器尺寸减小，叠加图像需要减少，而我使用左上角和左下角的原因是因为我想让叠加图像的底部与底部对齐在该断点处的jumbotron背景图像。

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

实施例的HTML：

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

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

正如图所示，你可以看到我是多么希望一字排开 enter image description here

我觉得我没有利用自举在这种情况下，任何指导表示赞赏，谢谢。

2014-01-08 Brad

如果你在这里发表您完成相关的代码或创建在jsfiddle.net帮助问题的样本会更快并且更准确。 – Arbel

@Arbel我正在寻找更多的例子，确切地解决我的问题。我不知道如何使用twitter bootstrap来定位父元素底部的元素，这就是为什么我使用position：relative并根据当前断点设置顶部/左侧样式的原因。 – Brad

有一些不同的方法，常用的方法是设置position：relative;在父母和职位上：绝对的;在孩子身上，将孩子放在底部的底部：0;为孩子。 – Arbel

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

2014-01-08 17:14:15 Arbel

回答