Bootstrap：为内部容器设置绝对位置

Question

我设置为相对位置的父div，内部的容器是具有背景颜色且设置为绝对位置的div，以便它始终位于容器的底部，但它没有被设置为底部看到我的代码（我添加内联CSS以获得清晰的理解）。

<div class="col-md-5 col-sm-5 col-xs-12" style="position: relative;">
  <h3>Category Title </h3>
  <h1>Heading </h1>
  <h1>90 Mins</h1>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
  <p>
  <!-- now this is position absolute div  -->
  <div class="innner" style="position:absolute;bottom:0;">
    <h4>Tonight on  Tv</h4>
    <div class="row">
      <div class="col-xs-4">
        <h4>7:30PM</h4>
      </div>
      <div class="col-xs-8">
        <h5>Program Titles Comes Here</h5>
      </div>
    </div>
  </div>
</div>

如果我设置position:absolute ，这就是我得到的

这里是bootply的链接：http://www.bootply.com/dRifoRP7Q6

Answer 1

将内容放在class =＆＃34; row＆＃34;

中

<div class="col-md-5 col-sm-5 col-xs-12">
  <div class="row">
    <h3>Category Title </h3>
    <h1>Heading </h1>
    <h1>90 Mins</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
    </p>
  </div>
  <!-- now this is position absolute div  -->
  <div class="row" style="background: #dab13b; float:left;">
    <h4>Tonight on  Tv</h4>
    <div class="row">
      <div class="col-xs-4">
        <h4>7:30PM</h4>
      </div>
      <div class="col-xs-8">
        <h5>Program Titles Comes Here</h5>
      </div>
    </div>
  </div>
</div>

Answer 2

将位置用作＆＃34;静态＆＃34;对于父div而不是亲属。

<div class="col-md-5 col-sm-5 col-xs-12" style="position: static;">