0

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

我正在使用 Twitter Bootstrap，缩略图有标准边距。我使用了此处找到的示例：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 应用过滤器。（通过添加class="hide"不应该看到的每个列表项来使用 CSS (does 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。建议请...

4

1 回答 1

3

你不应该对第一个项目应用边距，引导程序自己处理这个。使用缩略图时，不应使用行类。

试试这个 ：

<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

于 2013-04-04T15:02:34.383 回答