如何让bottom元素在Bootstrap个缩略图中贴在底部？

Question

我有三个 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>

Link 到 JSFiddle： https://jsfiddle.net/obliviga/qze6g77g/

P.S。我希望该解决方案适用于 IE8 或更高版本。

Answer 1

这不是最理想的解决方案，具体取决于您计划如何全面实施您的网站，因为它需要考虑最终位于 p 标记中的文本量的任何变化href 元素上方。必须调整边距以使链接在底部保持对齐。我将这些类添加到你的第二个和第三个 p 块 class="bottom-even-2nd" 和 class="bottom-even-3rd".

我还更改了您拥有的 col-sm-6 col-md-4，因为 Bootstap 在 12 列网格上工作，否则当 window 减少时，最后一个块将被推到第二个下方。

Answer 2

我刚刚用 overflow 将 min 和 max 的高度给了 <p>。看看这是否适合你。

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

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

如何让bottom元素在Bootstrap个缩略图中贴在底部？

How to make bottom element in Bootstrap thumbnails affixed to the bottom?

html

css

twitter-bootstrap

twitter-bootstrap-3

thumbnails