Bootsprap div kullanarak rowspan nasıl tasarlanır?

Question

Izgara sistemi önyükleme sistemi ile nasıl tasarlanır?

Büyük ve orta ölçekli ekranda 2 sütun ve 3 satır gösterilir. İlk sütun 1 hücreye sahip olacak ve ikinci sütunlar 3 hücreye sahip olacak.

Küçük ve çok küçük ekranlarda yalnızca 1 sütun ve 4 satır gösterilir. Her hücre tek bir sütunda birbiri ardına istiflenecektir. Büyük veya orta ekrandan ilk sütun/hücre ilk önce buraya gelmelidir.

Answer 1

bu deneyin edebilirsiniz:

DEMO

 <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        First Column, First Cell 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, First Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Second Cell 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
        Second Column, Third Cell 
       </div> 
      </div> 
     </div> 

Answer 2

Eğer yuva "satırlarında"

<div class = "row"> 
    <!-- first column--> 
    <div class = "col-lg-12"> 
    ...your code here 
    </div> 

    <!-- second column--> 
    <div class = "col-lg-12"> 
     <div class = "row"> 
      <div class = "col-lg-6"> 
      .. your code cell 1 
      </div> 

      <div class = "col-lg-6"> 
      .. your code cell 2 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

Jake745 cevap yuvalanmış sütun için "sıra" div kaçırmak ama şu şekilde olduğunu . Satırsız bir sütun olamaz, bu yüzden bu yapıyı korumak iyi olur. Ayrıca, tüm ekran boyutunun 12'ye veya istediğiniz boyuta yayılmasını istiyorsanız, sütunu tekrarlamanız gerekmez. Örneğin, tabletin ileride 6 sütunu kaplarken 12 sütunu almanız gerekiyorsa, sadece "col-xs-12 col-sm-6" yazmanız gerekiyor ve sm'in üzerindeki her şey otomatik olarak 6 sütun alacaktır.

Bu şekilde, kodunuzu azaltacak ve gereksiz kodları koyamazsınız. Umarım bu yardım.

<div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
       First Column, First Cell 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-6"> 
      <div class="row"> 
       <div class="col-xs-12"> 
       Second Column, First Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Second Cell 
       </div> 
       <div class="col-xs-12"> 
       Second Column, Third Cell 
       </div> 
      </div> 
     </div> 
    </div>