在bootstrap3中等于缩略图高度 [英] equal thumbnail height in bootstrap3
问题描述
有任何方法可以让一个缩略图与另一个缩略图的高度相同吗?
Is there any way to make one thumbnail the same height as another thumbnail?
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h5>Lorem ipsum dolor sit amet</h5>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h1>how to</h1>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h5>Lorem ipsum dolor sit amet, consectetur </h5>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
</div>
此代码的结果是,第二个缩略图的高度比第一个高, $ c>< a href> 1到另一个之间的高度不同
The result of this code is, the second thumbnail height is taller than the first and the <a href >
height between 1 to another is different
像这样 https://jsfiddle.net/hbfu2b97/1/
如果您输入结果
推荐答案
您需要创建一个运行onload的javscript函数,捕获所有缩略图,检查其中一个具有最高的高度,然后在缩略图上循环以分配它们获得的高度:
You need to create a javscript function that runs onload, catches all the thumbnails, checks which one has the highest height and then loops over the thumbnails to assign them the obtained height:
@fcalderan在他的答案中有一个很好的解决方案:
http://stackoverflow.com/a/9279339/2611451
@fcalderan has a good solution in his answer: http://stackoverflow.com/a/9279339/2611451
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumbnail"));
});
我更新了你的小提琴: https://jsfiddle.net/hbfu2b97/6/
I have updated your fiddle: https://jsfiddle.net/hbfu2b97/6/
UPDATE
UPDATE
为了使菜单链接与底部对齐,我已将缩略图
设置为相对定位并使食谱链接元素位置绝对并与buttom对齐:
To make the recipe link aligned to the bottom I have set the thumbnail
as relative positioned and made the recipe link elements position absolute and align to buttom:
.thumbnail
{
position:relative
}
.caption a
{
position:absolute;
bottom:1px
}
这篇关于在bootstrap3中等于缩略图高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!