Question

我有一个流畅的项目网格（产品缩略图），可以使用JS / jQuery进行过滤。但是我找不到设置CSS的最佳方法，以便在应用过滤器后使左边距正常。

我正在使用Twitter Bootstrap，缩略图有标准余量。我已经使用了这里的例子：Margin problems with thumbnails in Bootstrap进行了少量修改，以便在没有应用JS过滤器的情况下使边距很好。

CSS：

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

我的标记类似于：

<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>

现在 - 在我使用隐藏了一些<li>项目的JS的过滤器之前，这一点正常。（使用CSS将class="hide"添加到不应该看到的每个列表项（display:none））。然后剩余的项目得到错误的边距，如果例如第一个项目被隐藏，那么第二个项目剩余的左边距不应该。

我想在应用过滤器后用JS调整CSS，但这段代码对我不起作用：

$("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'});

这也不能解决边距的响应设置，因为这与不同的屏幕宽度不同。理想的解决方案当然只有CSS。建议请...

Answer 1

你不应该将边距应用于第一项，bootstrap自己处理这个问题。使用缩略图时，不应使用行类。

试试这个：

<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>

没有额外的CSS

Bootstrap缩略图列出边距

1 个答案: