CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
jtheman
jtheman

Reputation: 7491

Bootstrap thumbnails list margins

I have a fluid grid of items (product thumbnails) that can be filtered with JS/jQuery. But I can't find the best way to set the CSS for making the left margin be ok after I apply the filters.

I am using Twitter Bootstrap and the thumbnails has a standard margin. I've used the example found here: Margin problems with thumbnails in Bootstrap with small modifications for making the margin be fine without JS filters applied.

CSS:

ul.thumbnails > li:nth-child(1), ul.thumbnails li.span3:nth-child(4n + 5) {
  margin-left : 0px;
}

My markup is something like:

<div class="row-fluid products">
  <ul class="thumbnails">
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
 </ul>
</div>

NOW - this works fine until I apply a filter with JS that hides some of the <li> items. (using CSS by adding class="hide" to each list items that shouldn't be seen (does display:none)). Then the remaining items gets wrong margins, if for example the first item gets hidden then the second has a remaining left-margin which it shouldn't.

I thought of adjusting CSS with JS after applying the filter but this code doesn't work for me:

$("li.product.span3").css({ 'margin-left': '2.5641%'});
$("li.product.span3:not(.hide):nth-child(1)").css({ 'margin-left': '0'});
$("li.product.span3:not(.hide):nth-child(4n+5)").css({ 'margin-left': '0'});

Also this wouldn't address the responsive settings for the margin as this differ from different screen widths. The ideal solution is CSS only of course. Suggestions please...

Upvotes: 0

Views: 3022

Answers (1)

Bart Calixto
Bart Calixto

Reputation: 19715

you should not apply margins to first items, bootstrap take care of this by itself. when using thumbnails you should not use the row class.

try this :

<div class="products">
  <ul class="thumbnails">
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
    <li class="product span3"><!-- product image and info --></li>
 </ul>
</div>

with no extra css

Upvotes: 3

Related Questions