4 colonne a 2 colonne con Twitter Bootstrap

Question

ho un 4 colonne fluido layout:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3">A</div> 
     <div class="span3">B</div> 
     <div class="span3">C</div> 
     <div class="span3">D</div> 
    </div> 
</div> 

[ A ][ B ][ C ][ D ] 

Per i dispositivi mobili, bootstrap rende le colonne uno sotto l'altro, che funziona bene:

[   A    ] 
[   B    ] 
[   C    ] 
[   D    ] 

Ma per i tablet, mi piacerebbe avere 2 colonne di 2:

[  A  ][  B  ] 
[  C  ][  D  ] 

E 'possibile realizzare questo comportamento in modo nativo con boo tstrap?

Answer 1

Ho scoperto che Zurb Foundation (http://foundation.zurb.com/docs/grid.php#threeBlockEx) offre questa funzionalità, ma voglio continuare con Twitter Bootstrap. Quindi sono riuscito ad aggiungere una regola personalizzata, basata sulla tecnica utilizzata da Foundation:

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 
} 

Answer 2

È sufficiente eseguire l'override del CSS per gli span nella query @media corrispondente ai tablet.

Così si può provare qualcosa di simile:

// Tablets & small desktops only 
@media (min-width: 768px) and (max-width: 979px) { 
    [class*=span] { 
    width: 50%; 
    } 
} 

Naturalmente, potrebbe essere necessario effettuare regolazioni. A causa del riempimento e dei margini, la larghezza potrebbe non essere effettivamente del 50%.

Answer 3

Hmm. Ho provato entrambe le regole nel mio CSS e nessuno di loro ha funzionato per me. È un peccato che questo manchi in BS 2.0. Spero che lo aggiungano in BS 3.0!

Grazie,

JK

Answer 4

aggiunta alla risposta di Emilie è inoltre necessario ripristinare la larghezza delle colonne,

@media (min-width: 768px) and (max-width: 979px) { 
    .row-fluid > [class*=span]:nth-child(2n+1) { 
     clear: both; 
     margin-left: 0; 
    } 

    .row-fluid .span3 { 
     width: 48.61878453038674%; 
    } 
}