4 colonnes à 2 colonnes avec Twitter Bootstrap

Question

J'ai un fluide de mise en page 4 colonnes:

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

Pour les appareils mobiles, bootstrap rend les colonnes un sous l'autre, qui fonctionne très bien:

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

mais pour les tablettes, je voudrais avoir 2 colonnes de 2:

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

Est-il possible d'atteindre ce comportement en mode natif avec boo tstrap?

Answer 1

J'ai découvert que Zurb Foundation (http://foundation.zurb.com/docs/grid.php#threeBlockEx) offre cette fonctionnalité, mais je veux continuer avec Twitter Bootstrap. J'ai donc réussi à ajouter une règle personnalisée, basée sur la technique que Foundation utilise:

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

Answer 2

Vous aurez juste besoin de remplacer le CSS pour les travées dans la requête @media correspondant aux tablettes.

Ainsi, vous pouvez essayer quelque chose comme ceci:

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

Bien sûr, des ajustements pourraient devoir être faits. En raison du rembourrage et des marges, la largeur peut ne pas être de 50%.

Answer 3

Hmm. J'ai essayé ces deux règles dans mon CSS et aucun d'eux n'a travaillé pour moi. Il est dommage que cela manque dans BS 2.0. J'espère qu'ils l'ajouteront dans BS 3.0!

Merci,

JK

Answer 4

Ajouter à la réponse de Emilie vous devez également réinitialiser les largeurs des colonnes,

@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%; 
    } 
}