Twitter Bootstrap responsive thumbnails: how to cure indentation on second row?

Question

I have the following example: http://jsfiddle.net/Q5dXc/show/

Any idea how I can cure the indentation after the 4th thumbnail?

Here is the source: http://jsfiddle.net/Q5dXc/

Looking at the documentation under the 'more examples' heading, I can see their 2 row example but I can't make it work.

Any ideas? Thanks in advance.

Answer 1

I've found the same issue and didn't find an elegant solution. I'm using this little hack:

.thumbnails .span4:nth-child(3n+1),
.thumbnails .span4:first-child + li + li + li,
.thumbnails .span4:first-child + li + li + li + li + li + li {
    margin-left: 0;
}

Note that the long series of li are the IE way, and you must add one of them for each row.

Answer 2

They don't really explain it well in the demo but if you use the <div class="row-fluid">around it you have to make another row for the next line of thumbnails. If you want to just make a bunch of thumbnails that are not fluid you can just use a regular <div> or <p>. This should be raised as an issue against Bootstrap so it can be fixed.