Thank you for the additional detail. I had never tried to use the thumbnail
component of BS. Knowing that was your specific issue I ran some tests. I
was able to confirm your issue:
1) When the thumbnail wrappers are not in ANY rows, the proper line break
and proper margin on the first thumbnail works as expected. You will see 2
rows of thumbnails.. without extra padding on the first one in the second
row.
-----
<ul class="thumbnails">
<li class="span5">
<div class="thumbnail">
<img src="http://www.w3resource.com/twitter-bootstrap/shoes2.jpg";
width="380" height="600" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="http://www.w3resource.com/twitter-bootstrap/shoes2.jpg";
alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="http://www.w3resource.com/twitter-bootstrap/shoes2.jpg";
alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="http://www.w3resource.com/twitter-bootstrap/shoes2.jpg";
alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
</ul>
-----
2) Placing the same code as above adds the extra padding/margin on the
first element within the second (or any further) rows.
-----
<div class="row-fluid">
<div class="span9">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span5">
<div class="thumbnail">
<img src="
http://www.w3resource.com/twitter-bootstrap/shoes2.jpg"; width="380"
height="600" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="
http://www.w3resource.com/twitter-bootstrap/shoes2.jpg"; alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="
http://www.w3resource.com/twitter-bootstrap/shoes2.jpg"; alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="
http://www.w3resource.com/twitter-bootstrap/shoes2.jpg"; alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
</ul>
</div>
</div>
<div class="span3">
span3 span3 span3 span3 span3
</div>
</div>
-----
Within my tests above, this seems to be that it was designed to be placed
into an area of your page that is not inside a bootstrap row element. That
makes some sense because you want the thumbnail rows to be "added
automatically" and look even. When placed into a row or fluid row, BS
always adds the left margins.
Doing a few google searches brought up the following stackoverflow
question, which is just about the same as yours:
http://stackoverflow.com/questions/15205880/how-to-create-a-bootstrap-thumbnails-grid
Setting the left margin to 0 within the "li:nth-child" may work for you.
Meaning that if you will have two span6 per row, every 3rd element will be
the first thumb in the new row.
.row-fluid li:nth-child(3n) {
margin-left: 0;
}
That is my basic solution here. But you will need to play with it more to
100% find your best solution. I personally use isotope.js (
http://isotope.metafizzy.co/) when setting up a thumb gallery. But that is
because I can never be 100% sure that the thumbnails and displayed text
will always be the same heights.
Hope this helps a bit.
- J e f f C o n k l i n -
- http://www.getoutsidenj.com
- http://twitter.com/GetOutsideNJ
- http://www.carabs.com
On Thu, Jun 27, 2013 at 9:21 AM, Mees Frenkel Frank <
[email protected]> wrote:
> Hi but thats not working because i have to use a thumbnail grid in an
> unordered list <ul> (to output the cms products). Have a look at my
> screenshot, then you see whats going wrong.
>
> Or i do something wrong...
>
> This is my HTML:
>
> <div class="row-fluid">
>
> <div class="span9">
>
> <div class="row-fluid">
>
> <ul class="thumbnails">
>
> <li class="span6">
> <div class="thumbnail">
> <img data-src="holder.js/300x200" alt="">
> <h3>Thumbnail label</h3>
> <p>Thumbnail caption...</p>
> </div>
> </li>
> <li class="span6">
> <div class="thumbnail">
> <img data-src="holder.js/300x200" alt="">
> <h3>Thumbnail label</h3>
> <p>Thumbnail caption...</p>
> </div>
> </li>
> <li class="span6">
> <div class="thumbnail">
> <img data-src="holder.js/300x200" alt="">
> <h3>Thumbnail label</h3>
> <p>Thumbnail caption...</p>
> </div>
> </li>
> <li class="span6">
> <div class="thumbnail">
> <img data-src="holder.js/300x200" alt="">
> <h3>Thumbnail label</h3>
> <p>Thumbnail caption...</p>
> </div>
> </li>
>
> </ul>
>
> </div>
> </div><!-- end span9 -->
>
> <div class="span3">
> <div class="well">sidebar</div>
> </div><!-- end span3 -->
> </div>
>
>
> Op donderdag 27 juni 2013 13:54:08 UTC+2 schreef Mees Frenkel Frank het
> volgende:
>
>> Hi,
>>
>> how do i achieve this? (see attachment for a good example).
>>
>> I am getting problems from the third image...
>>
>> Thanks a lot.
>>
> --
> You received this message because you are subscribed to the Google Groups
> "twitter-bootstrap" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
![http://www.w3resource.com/twitter-bootstrap/shoes2.jpg"](http://www.w3resource.com/twitter-bootstrap/shoes2.jpg"){kind=link}