Twitter 引导程序缩略图。使字幕内联答案

【问题标题】：Twitter Bootstrap Thumbnail. Make Caption InlineTwitter 引导程序缩略图。使字幕内联
【发布时间】：2013-12-02 16:39:03
【问题描述】：

看This Fiddle

代码：

<div class="col-md-12">
    <fieldset>
        <legend>Aplikasi Intranet</legend>
                <div class="row">
            <div class="col-xs-3 col-sm-1">
            <a style="margin-bottom:0;">
            <center>
                <img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
            <b>Mail</b>
            </center>
                </a>
            </div>
                    <div class="col-xs-3 col-sm-1">
            <a style="margin-bottom:0;">
            <center>
                <img width="64" height="56" src="http://placehold.it/200x150" class="img-responsive" style="margin-bottom:0;"/>
            <b>Mail Bla Bla Bla</b>
            </center>
                </a>
            </div>
                    <div class="col-xs-3 col-sm-1">
            <a style="margin-bottom:0;">
            <center>
                <img width="64" height="56" src="http://placehold.it/200x165" class="img-responsive" style="margin-bottom:0;"/>
            <b>Mail Mail Bla Bla Bla</b>
            </center>
                </a>
            </div>
        </div>
</fieldset>
</div>

不同的图片高度，如何让标题保持在同一行？（间距响应地参考最高图像）

预期布局：

【问题讨论】：

小提琴与您预期的布局无关......
哦，对不起。我已经更新了链接。
您知道引导程序的缩略图是一个类而不是解决方案。也就是说，如果您的图像、文本、标题以及 .thumbnail 中的所有内容的高度/字符数不完全相同，则结果为：jsbin.com/OvobotIg/1。为避免不清除必须将每个部分连续添加最多 12 个或使用其他一些清除方式，但即使这样，结果也不那么热。如果不添加它们，Boostrap 中没有等高砌体类型布局的解决方案。这是我用砖石/同位素做的事情：jsbin.com/OvobotIg/2.

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以将img 包装在一个容器中，并在该容器上设置一个高度：

<a style="margin-bottom:0;">
    <center>
        <div class="img_container">
            <img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
        </div>
        <b>Mail</b>
    </center>
</a>

.img_container {
    height: 56px;
}

Updated fiddle

编辑：

要与动态高度对齐，您可以重新排列 HTML 结构：

<div class="row">
    <div class="col-xs-3 col-sm-1">
        <a href="#"><center>
            <img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
        </center></a>
    </div>
    <div class="col-xs-3 col-sm-1">
        <a href="#"><center>
            <img width="64" height="56" src="http://placehold.it/200x150" class="img-responsive" style="margin-bottom:0;"/>
        </center></a>
    </div>
    <div class="col-xs-3 col-sm-1">
        <a href="#"><center>
            <img width="64" height="56" src="http://placehold.it/200x165" class="img-responsive" style="margin-bottom:0;"/>
        </center></a>
    </div>
</div>
<div class="row">
    <div class="col-xs-3 col-sm-1">
        <a href="#"><center>
            <b>Mail</b>
        </center></a>
    </div>
    <div class="col-xs-3 col-sm-1">
        <a href="#"><center>
            <b>Mail Bla Bla Bla</b>
        </center></a>
    </div>
    <div class="col-xs-3 col-sm-1">
        <a href="#"><center>
            <b>Mail Mail Bla Bla Bla</b>
        </center></a>
    </div>
</div>

JSFiddle

【讨论】：

height 大小能否动态引用最高图像？
我不这么认为，因为<img> 不是兄弟姐妹。但是您可以将链接分成两部分：一个用于图片，一个用于文本（然后您将能够自动对齐图片，请参阅我的编辑）