在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放在容器的底部。我试过应用position：absolute;和底部：0;到了那一行，但是只需将它放在页面的底部并放入＆＃34; 1/10＆＃34;剩下。我希望它留在容器内，我无法找到解决办法！

我错过了什么？

编辑：我也尝试给父div一个绝对位置，然后应用绝对的底部：0;到了那一行，但仍然没有工作

Answer 1

您应该将position: relative提供给.container或.jumbotron元素。这样，您可以将position: absolute;和bottom: 0;设置为.push-to-bottom div。

修改

根据您的评论，您可以这样做：

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/