次の構成でサムネイルを表示したいと思います (画面幅が最も広いものから最も狭いものまで):
- 1 行に 6 つのサムネイル (各サムネイルは
span2) - 3 つのサムネイルの別の行の上にある 1 つの行にまたがる 3 つのサムネイル
- 1 つの行に 2 つのサムネイルがあり、他の 2 つの行の上にそれぞれ 2 つのサムネイルがあります
- 5 つの行の上に各行に 1 つのサムネイルがあり、それぞれに 1 つのサムネイルがあります
これはすべて同じマークアップを使用することを望みます。Twitter Bootstrap を使用しています。今、私はこのようなものを持っています：
<div class="container-fluid">
<div class="row-fluid">
<ul class="thumbnails">
...
...
</ul>
</div>
</div>
これで今できることは、1 行に 6 つのサムネイルを表示することだけです。画面の幅が狭すぎる場合は、1 行に 1 つのサムネイルにレイアウトを変更します。必要な中間ステップをスキップしました。
TB でやろうとしていることをどのように達成できますか? TB が提供するものを十分に活用したいので、マークアップのみのソリューションを望んでいます。