Discussion :

[mello]

Bonjour tout le monde,

Je débute avec bootstrap et je suis confronté à un petit problème de décalage après un retour a la ligne.

Un exemple simple valant mieux qu'une explication compliqué : voici un code qui illustre le problème :

Code html :

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

1
2
3
4
5
6
7
8
<div class="row">
	<div class="col-md-4 col-sm-6 col-xs-12 alert alert-info">bloc 1 haut gauche - blabla</div>
	<div class="col-md-4 col-sm-6 col-xs-12 alert alert-info">bloc 2 haut milieu - blabla<br />blabla</div>
	<div class="col-md-4 col-sm-6 col-xs-12 alert alert-info">bloc 3 haut droite - blabla</div>
	<div class="col-md-4 col-sm-6 col-xs-12 alert alert-info">bloc 4 bas gauche - blabla</div>
	<div class="col-md-4 col-sm-6 col-xs-12 alert alert-info">bloc 5 bas milieu - blabla</div>
	<div class="col-md-4 col-sm-6 col-xs-12 alert alert-info">bloc 6 bas droite - blabla</div>
</div>

Dans cet exemple, je voudrais avoir 2 lignes de 3 blocs chacune (sur un écran large). Le problème vient du fait que le bloc 2 est plus grand que les autres blocs, résultat : les blocs se décalent et j'ai finalement 3 lignes avec des trous :



Je suis persuadé qu'il s'agit d'une erreur de débutant mais je ne trouve pas la solution.

Pour information, le code ci-dessus est simplifié mais ces différents bloc sont chargés à partir d'une base de données... Je ne maitrise pas vraiment la hauteur de chaque bloc (qui peu varier de quelques lignes) ni leur nombre.

[mello]

Personne ne peut m'aider ?

La solution est peut être de ne pas utiliser les classes "row" et "col-xx-xx" ? Si il y a une autre solution je suis preneur aussi

[rodolphebrd]

Bonjour,

il faudrait fournir le code CSS épuré pour qu'on puisse apporter une aide.

[johnrock]

Bonjour
Essaie de poster ton code CSS pour une aide favorable de notre part

[mello]

Heuu désolé je ne pensais pas que ce soit nécessaire... C'est un bootstrap dernière version (V3.1.1) non modifié.

Je vais vous poster un extrait :

Code CSS :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
.row {
  margin-right: -15px;
  margin-left: -15px;
}
 
.row:before,
.row:after {
  display: table;
  content: " ";
}
 
.row:after{
  clear: both;
}
 
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
 
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
 
 
.col-md-4, .col-sm-6, .col-xs-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
 
.col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
 
@media (min-width: 768px) {
  .col-sm-6{
    float: left;
  }
 
 .col-sm-6 {
    width: 50%;
  }
}
 
@media (min-width: 992px) {
  .col-md-4 {
    float: left;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
}

[NoSmoking]

Bonjour,

La solution est peut être de ne pas utiliser les classes "row" et "col-xx-xx" ? Si il y a une autre solution je suis preneur aussi

effectivement tu cherches à faire rentrer sur la même ligne plus d'éléments que la ligne peut en contenir. De plus il te faut faire attention aux cumuls des classes qui peuvent engendrer bien de désagréments.

En modifiant la structure du document comme suit

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="la_table">
    <div class="row">
  	<div class="alert alert-info">bloc 1 haut gauche - blabla</div>
  	<div class="alert alert-info">bloc 2 haut milieu - blabla<br />blabla</div>
  	<div class="alert alert-info">bloc 3 haut droite - blabla</div>
    </div>
    <div class="row">
  	<div class="alert alert-info">bloc 4 bas gauche - blabla</div>
  	<div class="alert alert-info">bloc 5 bas milieu - blabla</div>
  	<div class="alert alert-info">bloc 6 bas droite - blabla</div>
    </div>
</div>

et en appliquant le CSS suivant

Code :

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
20
21
22
.alert {
  padding: 15px;
/*  margin-bottom: 20px;/**/
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.la_table{
  display: table;
  border-collapse: separate;
  border-spacing: 0 0.5em;
}
.la_table > div{
  display: table-row;
}
.la_table > div > div{
  display:table-cell;
}

tu ne devrais ne pas être loin de ce que tu cherches.

[mello]

Bonjour et merci pour ta réponse.

J'avais pensé à faire quelque-chose comme ça mais ça n'est plus respensive disign. En effet, je voudrais avoir 3 bloc par ligne sur un écran large mais sur un écran plus petit je ne voudrais plus que 2 bloc par ligne et sur un très petit écran je ne voudrais plus que 1 bloc par ligne (via les classe col-md-4 (3 blocs par ligne), col-sm-6 (2 blocs par ligne) et col-xs-12 (1 bloc par ligne)).

[NoSmoking]

Dans ce cas il faut que tu définisses dans la déclaration des medias queries les "retours à la ligne" via un clear:left.

Cela pourrait s'écrire, avec le HTML suivant

Code html :

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

1
2
3
4
5
6
7
8
<div class="la_table">
  	<div class="cell alert alert-info">bloc 1 haut gauche - blabla</div>
  	<div class="cell alert alert-info">bloc 2 haut milieu - blabla<br>blabla</div>
  	<div class="cell alert alert-info">bloc 3 haut droite - blabla</div>
  	<div class="cell alert alert-info">bloc 4 bas gauche - blabla</div>
  	<div class="cell alert alert-info">bloc 5 bas milieu - blabla</div>
  	<div class="cell alert alert-info">bloc 6 bas droite - blabla</div>
</div>

et en modifiant le CSS comme suit

Code :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
html, body {
    margin: 0;
    padding: 0;
}
.alert {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}
.alert-info {
    background-color: #D9EDF7;
    border-color: #BCE8F1;
    color: #31708F;
}
.cell {
    box-sizing: border-box;
    float: left;
    width: 100%;
}
@media (min-width: 992px) {
  .la_table div.cell {
      width: 33.333%;
  }
  .la_table div:nth-child(3n+1) {
      clear: left;
      color: #008000;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .la_table div.cell {
      width: 50%;
  }
  .la_table div:nth-child(2n+1) {
      clear: left;
      color: #008000;
  }
}

ici on utilise la propriété :nth-child pour renvoyer à la ligne.

à lire Les fondamentaux du Responsive Web Design

[johnlobs]

Salut ,
Il faut savoir que les classes col-md sont très faciles a manipuler si tu en connais les secrets!
tu dois d'abord savoir que tu dois les considérer comme des colonnes qui te divisent ta page;donc dans un premier temps il serait convenable de déclarer un div qui englobe les autres et qui sera considerée comme conteneur(col-md-12) puis à l’intérieur tu sais donc que tu as par exemple (en utilisant col-md-4) 3 espaces possibles qui seront alignés.tu peux à l’intérieur d'un col-md-4 declarer des col-md et dans ce cas ton col-md-4 sera considéré comme un col-md-12.
C'est très simple et tu n'aura plus de problème et ça te fera éviter du css brut qui sera adéquat a certain navigateur et pas a d'autres et qui te créera bien des problèmes(navigateurs ,mobiles etc)

[johnlobs]

Bonjour,
Comme je t'ai dit tu peux avoir dans une row un col-md-12 or toi tu declare plusieurs col-md-4 ;Si c'est des 4 tu pourras en avoir uniquement 3 par row sinon tu declares d'autres row.
Concernant le deuxième bloc tu dois lui donner plus d'espace(col-md-5 ou autre)
Bonne chance