2

Backbone.js Collection と組み合わせて、Twitter ブートストラップでグリッド、スタック レイアウトを実現しようとした人はいますか?

リストへのグリッド

デモ: (ブートストラップなし)

http://vandelaydesign.com/demos/list-grid-view/index.html

リスト レイアウトは、コレクション内の各モデルの以下のマークアップで簡単に実現できました。

<div class="row">
 <div class="span12">
 </div>
</div>

並べるモデルの数を固定にしても、グリッド レイアウトはより複雑に見えます。行ごとに 4 つのモデルをレンダリングすると仮定すると、必要なマークアップは次のとおりです。

<div class="row">
  <div class="span3"></div>
  <div class="span3"></div>
  <div class="span3"></div>
  <div class="span3"></div>
</div>

でラップ4 div's with class span3する必要があるため、上記のマークアップを生成するのは非常に困難<div class="row">です。

これを行うにはどうすればよいですか？

4

1 に答える 1

0

これを実現するには、CSS疑似クラスを使用する必要があります:nth-child。HTMLは次のとおりです。

<div class="row column3">
    <div class="span3"></div>
    <div class="span3"></div>
    <div class="span3"></div>
    <div class="span3"></div>
</div>

column3変更されたのは、クラスの追加だけです。必要なCSSは次のとおりです。

.column3 > div:nth-child(3n+4) {
    clear: left;
}

これにより、3番目の要素ごとにすべての要素に、3列のレイアウトを提供する次の行にクリアするように指示する必要があります。

于 2012-12-31T11:50:27.647 に答える