0

JS/jQuery でフィルタリングできる項目 (製品のサムネイル) の流動的なグリッドがあります。しかし、フィルターを適用した後、左マージンを適切にするための CSS を設定する最良の方法が見つかりません。

私は Twitter Bootstrap を使用しており、サムネイルには標準の余白があります。ここにある例を使用しました: JS フィルターを適用せずにマージンを調整するための小さな変更を加えた Bootstrap のサムネイルのマージンの問題。

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>NOW - 一部のアイテムを非表示にする JS でフィルターを適用するまで、これは正常に機能します。class="hide"（表示されるべきではない各リスト項目に追加してCSSを使用します（表示されますdisplay:none））。次に、残りのアイテムが間違ったマージンを取得します。たとえば、最初のアイテムが非表示になり、2 番目のアイテムに本来あるべきではない左マージンが残っている場合です。

フィルターを適用した後、CSS を JS で調整することを考えましたが、このコードは機能しません。

$("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 に答える