2

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.

4

3 に答える 3

4

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:

Problems with float:left

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)

于 2013-03-26T15:31:29.923 に答える
0

This is nothing that can be done with bootstraps floated layout alone, as Miljan suggested you need a plugin. eg Masonry to align the divs to align perfectly with eachother.

Here is a link with some help along the way: http://jaxenter.com/tutorial-get-a-tiled-layout-with-jquery-plugins-43514.html

于 2013-03-26T15:29:21.830 に答える
0

Excelent, I used with bootstrap and works fine. If you want to change the number of columns just change.

#columns {
   -webkit-column-count: 4;
   ...
}

another point is due to some images present boxes with different sizes, so one option is to set to a fixed size, so you will have a homogeneous interface.

.pin img {
   width: 230px;
   ...
}

I used 230px to a four columns size.

于 2015-07-13T02:42:31.110 に答える