İkili önyükleme kullanarak dinamik döşemeler oluşturmanız gerekiyor

Question

Bir dizi nesneyi döndürmek için açıyorum. Her bir div ile dom temsil nesneyi, bir şeyler

<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> 

gibi bu div'ler sadece ekrandaki işlemek istiyorum ve istediğiniz konteyner div genişliği kadar bir sonraki satıra geçmek için ulaşıldığında dolu. Bu, boostrap ile bunu yapmak için ideal bir yol mu yoksa bu etki için başka sınıflar kullanmalı mıyım? İstediğim şeye sahibim ama marjlar kapalı.

Answer 1

Her bir döşemenin düzenini tanımlayan CSS sınıflarınızı oluşturun. Ardından, Isotope gibi bir eklenti kullanın (tüm karo düzenini yeniden yazma mantığını kaydetmek için) - ve her çini oluşturmak ve İzotop ızgarasına eklemek için JS'yi kullanın. Isotope sizin için dinamik düzenleme işleyecektir - dinamik olarak yeni bir karo eklediğiniz her zaman Isotope güncelleme düzeni yöntemini çağırdığınızdan emin olun.

Düzenleme: Burada, bu tür bir uygulamayı kullanan bir çalışma sitesi var. MVC'miz, SSS ızgarasındaki soruları dinamik olarak değiştirmemize izin verir ve düzen, Isotope tarafından işlenir (SSS’a kaydırın). Kaynağı görüntüleyebilir ve uygulamadan gerektiği gibi ödünç alabilirsiniz.

Example Here