html - 如何使Bootstrap缩略图中的底部元素固定在底部？

我有三个Bootstrap缩略图，它们的高度因其各自的内容而异。如何使所有三个缩略图的最底端元素与所有最底端的元素对齐？因此，我希望所有按钮都与最底部的按钮对齐。

这是我到目前为止的内容：

<div class="container" id="section-6">
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="http://www.blancocountycat.org/images/Ear-Tipped-Cat.jpg" data-holder-rendered="true">
                <div class="caption text-center">
                     <h3>test</h3>

                    <p>The most popular front-end framework for developing responsive, mobile first projects on the web. The most popular front-end framework for developing responsive, mobile first projects on the web.</p> <a href="#" class="discover-button">MEET OUR PEOPLE</a>

                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="http://www.hillspet.com/images/en-us/seniorCatBrainAging.jpg" data-holder-rendered="true">
                <div class="caption text-center">
                     <h3>test</h3>

                    <p>The most popular front-end framework for developing responsive, mobile first projects on the web.</p> <a href="http://www.merckformothers.com/" class="discover-button">SUPPORT THE CAUSE</a>

                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="https://media4.giphy.com/media/mIPlgBgw9dgS4/200_s.gif" data-holder-rendered="true">
                <div class="caption text-center">
                     <h3>Our History</h3>

                    <p>The most popular front-end framework for developing responsive, mobile firstework for developing responsive, mobile first projects on the web.</p> <a href="#" id="history-button">EXPLORE OUR HISTORY TIMELINE</a>

                </div>
            </div>
        </div>
    </div>
</div>

链接到JSFiddle：
https://jsfiddle.net/obliviga/qze6g77g/

附言我希望该解决方案可以在IE8或更高版本中使用。

最佳答案

我只是用min将max和<p>的高度赋予了overflow。看看这是否适合您。

p.middle-text {
  min-height: 130px;
  max-height: 130px;
  overflow: hidden;
}

https://www.xtendify.com/en/snippets/bootstrap/9-equal-column-height

关于html - 如何使Bootstrap缩略图中的底部元素固定在底部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31148867/