Bootstrap 3缩略图垂直对齐

Question

我正在创建我的第一个网站，使用Twitter Bootstrap 3。我想用缩略图创建一个反馈部分。我需要的是在每个缩略图的底部垂直对齐社交按钮，无论缩略图的高度。

下面是我的HTML代码:

<div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail vertical-container">
                    <img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
                    <div class="caption">
                        <h3>Lorem Ipsum!</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
                        <div class="vertical-container1">
                            <p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
                    <div class="caption">
                        <h3>Lorem Ipsum!</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
                        <p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
                    <div class="caption">
                        <h3>Lorem Ipsum!</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
                        <p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
                    </div>
                </div>
            </div>
        </div>!

现在的样子:

Answer 1

可以通过定位div来实现。将位置relative分配给容器div，在您的情况下为col-md-4，但由于它是一个引导类，您必须给它其他类名并分配相对位置。

包含按钮的div的位置。(在您的情况下vertical-container1)位置绝对

parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}

Answer 2

您可以使用自定义类设置文本区域的最小高度;

<p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>
.min-height {
min-height:100px;
}

这将确保所有的文本区域的高度相同，即使没有足够的文本来按下按钮。

范例

当然，这可能是另一种方式，最终有太多的文本，在这种情况下，你会想要添加一个最大高度;

乐天派，乐天派，乐天派。"我的药方和我的工资……"

.max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}

Answer 3

你试过的代码:

.thumbnail {position:relative;}
.thumbnail a.btn {position:absolute;bottom:0;left:0;}