Come progettare rowspan usando il div di bootstrap?

Question

Come progettare il sistema Grid con bootstrap?

Nel display grande e medio mostra 2 colonne e 3 righe. La prima colonna avrà 1 cella e le seconde colonne avranno 3 celle.

Nel display piccolo ed extra piccolo mostrerà solo 1 colonna e 4 righe. Ogni cella si impilerà una dopo l'altra in una singola colonna. La prima colonna/cella dal display grande o medio dovrebbe venire prima qui.

Answer 1

provare questo:

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

è possibile nido le "righe"

<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 risposta è giusta in qualche modo, ma perdere la "riga" div per la colonna nidificato . Non puoi avere una colonna senza riga, quindi è bene mantenere quella struttura. Inoltre, non è necessario ripetere la colonna se si desidera che tutte le dimensioni dello schermo siano distribuite su 12 o qualsiasi dimensione. Ad esempio, se hai bisogno di un cellulare per prendere 12 colonne mentre il tablet in poi occupa 6 colonne, devi solo inserire "col-xs-12 col-sm-6" e qualsiasi cosa sopra sm sempre occuperà 6 colonne automaticamente.

In questo modo, si riduce il codice e non si inseriscono codici non necessari. Spero che questo aiuto.

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