Bootstrap 2.3.2:包装到第二行的缩略图标题文本使容器高度拉伸

时间:2013-12-20 15:32:30

标签: html css grid thumbnails twitter-bootstrap-2

我正在寻找一种在网格中显示带字幕图像的方法,以便所有网格项目的大小相同。我使用标准的Bootstrap 2缩略图代码如下:

<div class="container imgGrid">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span3 center">
                <h4>Linked caption text</h4>
                <img ...>
            </li>

在这种情况下,额外的“中心”类将文本居中。 imgGrid类将图像大小设置为width:100%,height:auto。这允许不同尺寸的图像适合网格,因为宽度稍微变化。在这种情况下,图像高度不是问题。

问题是当文本标题足够长以包裹到第二行时,缩略图容器高度增加并且网格不再对称。

如何使额外的文本空间覆盖图像而不是拉伸容器高度?

0 个答案:

没有答案