Discussion :

[Tankian]

Bonjour,

Je viens vers vous car je débute avec bootstrap et j'ai un petit souci que je n'arrive pas à résoudre (ni comprendre).
J'ai lu attentivement le fonctionnement des grilles mais je n'arrive pas à faire empiler les bloc dans 1 row qui contient 4 colonnes.
Je dois afficher des lignes avec 4 colonnes max par ligne.

Mon problème est que je passe d'une ligne de 4 blocs à 1 ligne de 1 bloc dès que je descends en dessous de la taille spécifiée dans la classe.

Ces 4 colonnes :
X X X X

deviennent
X
X
X
X

alors que je souhaiterai
X X X
X

ou encore
X X
X X

en fonction de la taille du navigateur.

Voici mon code, voyez vous ce que je fais de mal ?

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="row">
    <?php 
    //Parcourt de l'ensemble des questions
    for ($i=1; $i <= NBQUESTION ; $i++) { 
       //Affichage de 4 questions par ligne
       if($i %4 == 0) { echo '<div class="row">'; }
    ?>	
        <div class="col-md-3">
           <div class="chart-wrapper">
               <div class="chart-title">Q<?php echo $i; ?></div>
	          <div id="Q<?php echo $i; ?>" style="height: 200px;"></div>
                </div>
           </div>					
        <?php
     if($i %4 == 0) { 
        echo '</div>'; }
      }
?>
</div>

Merci de votre aide ou de vos conseils.

[Invité]

Bonjour,
si tu as posté dans le forum CSS, c'est que tu te doutes que ce n'est pas un problème lié au HTML.
Et tu as raison.

Regarde dans le fichier CSS : .row .col-md-3.
width passe de 25% à 100% en fonction de la largeur de fenêtre (@media queries).
Il suffit que tu définisses width:50%; pour l'intervalle de largeur qui t’intéresse.

[Tankian]

En effet, merci beaucoup pour ta réponse.