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>

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

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

Answer 1

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

我还更改了自从Bootstap在12列网格中工作以来的col-sm-6 col-md-4，否则当窗口减少时，最后一个块将被推到第二个块之下。

Answer 2

我刚刚将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

如何将Bootstrap缩略图中的底部元素贴在底部？

2 个答案: