如何使Bootstrap的缩略图像Pinterest上的缩略图一样？ [英] How to make Bootstrap thumbnail behave like the thumbnails on Pinterest?

问题描述

我在我的项目中使用了Twitter Bootstrap缩略图，但每张照片下的标题长度各不相同，我希望它们能像Pinterest上的这个示例一样填充所有空间：

所以如果我们需要一个Pinterest布局，我们应该使用一些javascript或者简单地使用CSS3的新的列属性（但是你将失去与旧浏览器的兼容性）。

简单的布局可以是：

 < div id =wrapper> 
< div id =columns> 
< div class =pin> 
< img src =.../> 
< p> 
 ... 
< / p> 
< / div> 
 ... 
  

和CSS：

  #columns {
 -webkit-column-count：3; 
 -webkit-column-gap：10px; 
 -webkit-column-fill：auto; 
 -moz-column-count：3; 
 -moz-column-gap：10px; 
 -moz-column-fill：auto; 
列数：3; 
 column-gap：15px; 
 column-fill：auto; 
} 
 
 .pin {
 display：inline-block; 
 padding：15px; 
 padding-bottom：5px; 
} 
  

在这里你有一个如何用这个简单的布局来做的例子。 （不是我的）

I am using Twitter Bootstrap thumbnails in my project, but the length of the caption under each photo is different each time and I want them to fill all the space like this example on Pinterest:

http://pinterest.com/all/?category=diy_crafts

How can I achieve this? Thanks.

解决方案

You can't achieve with the thumbnails with twitter bootstrap in this case, because the float:left of the thumbnails will not work as you want.

The float:left always put the next thumbnail just under the last float element in the layout and at the right at the element of the previous float:left elements.

This image will explain it better:

These elements are thumbnails, the element number 5 is just under the 4th element and as left as possible in the layout. The element 6th is being put under the 5th element and as left as possible and if we put a 7th element, it will be put at the left of the page, in the first column and just under the element 6.

http://jsfiddle.net/YsrtS/

So if we want a Pinterest layout, we should use some javascript or simply use the new columns property of CSS3 (but you will lose compatibility with old browsers).

Simple layout could be:

<div id="wrapper">
    <div id="columns">
        <div class="pin">
            <img src="..." />
            <p>
                ...
            </p>
        </div>
     ...

and the CSS:

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    padding: 15px;
    padding-bottom: 5px;
}

Here you have an example of how you can do it with this simple layout. (Not mine)

这篇关于如何使Bootstrap的缩略图像Pinterest上的缩略图一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！