twitterブートストラップを使って動的タイルを作成する必要があります

Question

私は角度を使ってオブジェクトのセットを返します。私は、これらのdiv要素は、単に画面上にレンダリングしたいとコンテナのdivの幅がするまで次の行に移動するために到達したときに、

<div class="container-fluid"> 
    <div ng-repeat="x in loaders" class="col-sm-2"> 
    <div style="padding:15px;width:350px;"> 

     <table> 
      <tr> 
       <td> 
        <div style="font-size:60pt;">{{x.id}}</div> 
       </td> 
       <td> 
        <div style="padding-left:30px;font-weight:bold;width:100%;"> 
         <div>{{x.loaderCustomHeader}}</div> 
         <div>Type:&nbsp;{{x.loaderType}}</div> 
         <div>Last Run Time:&nbsp;{{x.lastRunTimeFormatted}}</div> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
    </div> 
<div> 

のようなものをdiv要素によって、DOMで表される各オブジェクトが欲しいです満タン。これはブーストラップでこれを行うのが理想的なのでしょうか、あるいは私はこの効果のために他のいくつかのクラスを使うべきですか？私は何かしたいが、余裕はない。

Answer 1

各タイルのレイアウトを定義するCSSクラスを作成します。その後、アイソトープのようなプラグインを使用して（すべてのタイル再配置ロジックを書く時間を節約します）、JSを使って各タイルをインスタンス化し、アイソトープグリッドに追加します。 Isotopeは動的配置を処理します。動的に新しいタイルを追加するたびにIsotopeで更新レイアウトメソッドを呼び出すことを確認してください。

編集：ここには、このタイプの実装を使用するビルドサイトがあります。私たちのMVCでは、FAQグリッド内の質問を動的に変更することができ、レイアウトはアイソトープ（FAQまでスクロールダウン）によって処理されます。ソースを表示し、必要に応じて実装から借りることを歓迎します。

Example Here