位列/容器

Question

<div class="container-full-bg" style="background-image:url('background.jpg');"> 
<div class="container special"> 
    <div class="jumbotron"> 
     <div class="row push-to-bottom"> 
      <div class="col-md-6"> 
      </div> 
      <div class="col-md-6"> 
       <p style="color:#fff;"><span style="color:red;font-size:100px;"> 1</span>/10</p> 
      </div> 
     </div> 
    </div> 
</div> 
<img src="xxx"/> 

所以我上面的代碼和它的作品，但唯一的事情是，我想在定位的行/列-MD-6容器的底部。我嘗試申請職位：絕對;和底部：0;到那一行，但這隻會將它放在頁面的底部，並將「1/10」留下。我希望它留在容器內，我找不到修復程序！

我錯過了什麼？

編輯：我也試着給父母的絕對位置，然後申請絕對底部：0;到該行，但仍然不起作用

Answer 1

您應該將position: relative設置爲.container或.jumbotron元素。通過這種方式，您可以將position: absolute;和bottom: 0;設置爲.push-to-bottom格。

編輯：基於您的評論

，你可以做這樣的：

html, 
body { 
    height: 100%; 
    width: 100%; 
} 
.jumbotron { 
    background-color: inherit; 
} 
.container-full-bg { 
    width: 100%; 
    height: 40%; 
    max-width: 100%; 
    background-position: center; 
    background-size: cover; 
} 
.container-full-bg .container, 
.container-full-bg .container .jumbotron { 
    height: 100%; 
    width: 100%; 
} 
.jumbotron { 
    position: relative 
} 
.jumbotron p { 
    font-size: 60px; 
    font-weight: 500; 
} 
.push-to-bottom { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

這裏有一個的jsfiddle：http://jsfiddle.net/thepio/Lnacr8kn/