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>!

How it looks now:

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;
}

即使没有足够的文字按下按钮，这也可确保所有文字区域的高度相同。

An Exmaple

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

Lorem ipsum dolor坐在amet，consectetur adipisicing elit。 Vel nostrum harum ipsam labore quos ...

.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;}

Bootstrap 3缩略图vertical-align

3 个答案: