Bootstrap 3缩略图粘底页脚

Question

我在周围搜索但没有找到关于粘性bootstrap缩略图页脚的信息。那么是否有人可以帮助我解决这个问题，我希望页脚粘贴在缩略图的底部，而不是在段落之后。

HTML

<div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><b>Related Links</b></h3>
                    </div>
                    <div class="panel-body">
                        <ul class="equal-height-thumbnail">
                            <li>
                                <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
                                <div class="caption">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
                                </div>
                                <div class="panel-footer">
                                    <p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
                                    <p><span class="glyphicon glyphicon-time"> 13:27</span></p>
                                </div>
                            </li>
                            <li>
                                <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
                                <div class="caption">
                                    <p>Lorem ipsum dolor sit amet, consectetur adi amet, consectetur adi amet, consectetur adi amet, consectetur adi amet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
                                </div>
                                <div class="panel-footer">
                                    <p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
                                    <p><span class="glyphicon glyphicon-time"> 13:27</span></p>
                                </div>
                            </li>
                            <li>
                                <figure><img src="http://www.htmllion.com/img/thumb.jpg" alt="Equal height of thumbnail"></figure>
                                <div class="caption">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesmet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>

                                </div>
                                <div class="panel-footer">
                                    <p><a href="#" class="btn btn-primary btn-block" role="button">Read</a></p>
                                    <p><span class="glyphicon glyphicon-time"> 13:27</span></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

CSS

.equal-height-thumbnail {


display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;


  margin: 0;
  padding: 0;
  list-style: none;
}

.equal-height-thumbnail li {
  width: 30%;
  margin: 0 1% 20px;
  padding:0 0.5%;
  background: #FFF;
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.1)
}

.equal-height-thumbnail figure {
  display: block;
  margin: 5px 0;
  padding: 0;
}

.equal-height-thumbnail figure img{ width:100%;}

.caption { padding: 2%;}

.equal-height-thumbnail panel-footer {
    padding:0px;
}

JSFIDDLE