引导缩略图和标题每行具有相同的高度? [英] Bootstrap thumbnails+caption with same height per row?
问题描述
There are related questions here or here, although none seemed to work for me.
我已经按照Bootstrap示例实现了带字幕的缩略图.但是，我的字幕文本的长度不同，导致三个缩略图的高度不同.看起来很丑.为了解决这个问题，我尝试了 matchHeight jQuery插件，但是没有一种效果.
I've followed the Bootstrap example to implement thumbnails with captions. However, my caption texts are of different lengths causing different heights for the three thumbnails. That looks rather ugly. To fix this I've tried the matchHeight jQuery plugin, but that didn't have an effect.
这是我的代码:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.matchHeight-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".thumbnail").matchHeight({ byRow: true, });
</script>
</head>
<body>
...
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="img/img-1.jpg" alt="">
<div class="caption">
<h4>Heading 1</h4>
<p>...</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="img/img-2.jpg" alt="">
<div class="caption">
<h4>Heading 2</h4>
<p>...</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="img/img-3.jpg" alt="">
<div class="caption">
<h4>Heading 3</h4>
<p>...</p>
</div>
</div>
</div>
</div>
...
</body>
我在这里想念什么?我怎样才能使这三个缩略图很好地对齐?
What am I missing here? How can I get these three thumbnail to align nicely?
推荐答案
I ended up using a neat trick from this answer, and writing my own code. The #mq-detector element tells me when media queries switch without me having to hard-code viewport widths. Then I hooked into the window's resize callback to know when the user changes the size of the browser window:
<script type="text/javascript">
(function() {
$(window).resize(checkAdjustThumbnailHeight);
$(document).ready(checkAdjustThumbnailHeight);
})();
</script>
第一次渲染checkAdjustThumbnailHeight函数是在页面呈现时，以及每次浏览器的resize事件触发时.该功能检查媒体检测器元素并相应地调整缩略图的高度:
The checkAdjustThumbnailHeight function is called the first time when the page is rendered, and every time the browser's resize event fires. That function checks the media detector element and adjusts the thumbnail heights accordingly:
function checkAdjustThumbnailHeight() {
if ($("#mq-detector > span.visible-lg").is(":visible")) {
adjustThumbnailHeight();
}
else if ($("#mq-detector > span.visible-md").is(":visible")) {
adjustThumbnailHeight();
}
else if ($("#mq-detector > span.visible-sm").is(":visible")) {
inheritThumbailHeight();
}
else if ($("#mq-detector > span.visible-xs").is(":visible")) {
inheritThumbailHeight();
}
else { }
}
请注意，对于sm和xs(实际像素值，请参见此处)大小我不修改缩略图的高度，因为在这种情况下，缩略图是一个在另一个之上而不是彼此相邻的位置渲染的.对于md和lg大小，我将缩略图的高度设置为最大:
Note that for sm and xs (actual pixel values see here) sizes I do not modify the thumbnail height because in those cases the thumbnails are rendered one above the other, not next to each other. For md and lg sizes, I set the thumbnail heights to the largest one:
function adjustThumbnailHeight() {
var heights = [ ];
$(".thumbnail").each(function() {
heights.push( $(this).height() );
});
var max = Math.max.apply(null, heights);
$(".thumbnail").each(function() {
$(this).height(max);
});
}
function inheritThumbailHeight() {
$(".thumbnail").each(function() {
$(this).css("height", "inherit");
});
}
这似乎很好.
添加，因为某些图像可能需要花费更多时间才能完成加载，因此缩略图的高度可能会偏斜.因此，我使用 imageLoaded 插件将调整缩略图的高度推迟到所有图像都完成加载为止.
ADDENDUM Because some images may take more time to finish loading, the height of the thumbnails can be skewed. Therefore I used the imageLoaded plugin to defer adjusting the thumbnails heights until all images have finished loading.
这篇关于引导缩略图和标题每行具有相同的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
