Twitter Bootstrap: faire une grille 2x2

Question

je les suivantes:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3"></div> 
     <div class="span3"></div> 
     <div class="span3"></div> 
     <div class="span3"></div> 
    </div> 
</div> 

Par défaut, cette div.span * couvre toute la largeur de l'écran, comme celui-ci:

[x][x][x][x] 

Au certaine largeur de l'écran, je veux que cela apparaisse dans une grille de 2x2, comme ceci:

[x][x] 
[x][x] 

Comment puis-je faire?

Answer 1

Désolé mes tentatives antérieures, je ne comprends pas bien votre question:

La chose que vous essayez avec bootstrap n'est pas vraiment possible que si vous allez pour vos propres sélecteurs @media. Il y a une bibliothèque appelée Neat. Je pense que c'est le example que vous recherchez.

ANCIENS TENTATIVES:

---

Essayez ceci, de here:

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

Cela devrait vous donner le résultat suivant:

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

Eh bien, c'est beaucoup de div s. Pas vraiment sûr si cela peut être fait plus léger.

---

Answer 2

Voici 2 options qui répondent sans avoir besoin de requêtes média. Redimensionnez les fenêtres pour voir comment elles réagissent.

CSS Colonnes:

http://jsfiddle.net/88t4L/

.row-fluid { 
    columns: 2 8em; 
} 

Ici, les colonnes doivent être au moins 8em large, mais s'il y a de la place pour tous à apparaître dans une rangée, il le fera.

http://caniuse.com/#search=columns

CSS Flexbox:

http://jsfiddle.net/88t4L/1/

.row-fluid { 
    display: flex; 
    flex-flow: row wrap; 
} 

.row-fluid .span3 { 
    flex: 1 0 8em; /* grow equally, don't shrink, preferred width of 8em */ 
} 

http://caniuse.com/#search=flexbox

Answer 3

La question initiale semble être une ancienne édition du bootstrap.

Voici ce qui résout parfaitement le problème dans le balisage Bootstrap 3. L'élément clé est le div clearfix qui affecte les fenêtres xs et sm [cas d'utilisation typique]. (sm non inclus dans l'exemple ci-dessous).

<div class="row"> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 

    <!-- Add the extra clearfix for only the required viewport --> 
    <div class="clearfix visible-xs-block"></div> 

    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
</div> 

via getbootstrap.com