Позиция строки в нижней части Jumbotron/контейнер

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"/> 

Так что я выше код и он работает, но единственное, что я хотел бы, чтобы расположить строки/COL-MD-6 на нижней части контейнера. Я пробовал применять положение: абсолютный; и внизу: 0; к строке, но это будет просто позиционировать его в нижней части страницы и поставить «1/10» влево. Я бы хотел, чтобы он остался внутри контейнера, и я не могу найти исправление!

Что мне не хватает?

Редактировать: Я также попытался предоставить родительскому div абсолютное положение, а затем применить абсолютное нижнее значение: 0; к ряду, но это все еще не сработает

Answer 1

Вы должны указать position: relative на номер .container или .jumbotron. Таким образом, вы можете установить position: absolute; и bottom: 0; в раздел .push-to-bottom.

EDIT:

Основываясь на ваш комментарий Вы можете сделать это следующим образом:

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/