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

回答