Twitter Bootstrap缩略图。制作标题内联

Question

查看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>

对于各种图像高度，如何使标题保持在同一行？ （间距响应参考最高图像）

预期布局：

Answer 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