twitter-bootstrap - twitter ブートストラップを使用してカテゴリを選択する流動的なレスポンシブ ギャラリー アイテムを実行する

Question

私は、次のようなレスポンシブで流動的なギャラリーを作ろうとしています: http://dev-so12.fr/Akram/murals/

カテゴリの 1 つをクリックすると、画像が消えたり、カテゴリの画像だけが表示されるようになります。

私は同じ振る舞いをしたいと思います。私はtwitterのブートストラップを使用していますが、これを行う別の方法を試しました。最初のものはこのマークアップでした:

<div class="existing liste container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp8.jpg" class="attachment-medium" alt="hp8">          
                </div>
                <div class="description">
                    bla
                </div>
            </div>

            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp6.jpg" class="attachment-medium" alt="hp6">          
                </div>
                <div class="description">
                    bla
                </div>
            </div>

            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp4.jpg" class="attachment-medium" alt="hp4">          
                </div>
                <div class="description">
                    blabla
                </div>
            </div>

            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp2.jpg" class="attachment-medium" alt="hp2">          
                </div>
                <div class="description">
                    blabla
                </div>
            </div>
            </div><div class="row-fluid">
            <div class="span3">
                <div class="img">
                    <img width="243" height="243" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/bati1.jpg" class="attachment-medium" alt="bati1">  
                </div>
                <div class="description">
                    blabla
                </div>
            </div>
            </div></div>

しかし、これには 4 つの画像ごとに新しい行が作成されるという問題があるため、1 つの画像を削除すると、適切な動作が得られません。

私が考えることができる他のマークアップは同じでしたが、1つの一般的な行があり、次にspan3 divのみがあるということだけでした

このマークアップの問題は、5 番目の画像と 10 番目の画像の余白を取り除く方法がわからないことです。JavaScript を使用してトリックを行うことができます。しかし、私がそれを避けることができれば、それは素晴らしいことです.

ありがとう