我正在寻找一种在网格中显示带字幕图像的方法,以便所有网格项目的大小相同。我使用标准的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。这允许不同尺寸的图像适合网格,因为宽度稍微变化。在这种情况下,图像高度不是问题。
问题是当文本标题足够长以包裹到第二行时,缩略图容器高度增加并且网格不再对称。
如何使额外的文本空间覆盖图像而不是拉伸容器高度?