Problème avec la grille boostrap

Sujet résolu

23 mars 2020 à 14:48:55

Bonjour,

j'ai un souci avec le code ci-dessous

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>{% block title %}SnowTricks{% endblock %}</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>

	<div class="container">
		<section class="row">
			<article class="col-2 border">
				<div class="row">
					<div class="col-10 border">a</div>
					<div class="col-1 border">b</div>
					<div class="col-1 border">c</div>
				</div>
			</article>
			<article class="col-2 border">
				<div class="row">
					<div class="col-6 border">a</div>
					<div class="col-3 border">b</div>
					<div class="col-3 border">c</div>
				</div>
			</article>
		</section>
	</div>

</body>

</html>

rendu obtenu

Il y a quelque chose que je n'ai pas dû comprendre avec la grille bootstrap.

Dans les deux cas j'ai des row dont la somme des colonnes sont sont égales à 12 (cas 1 : 10+1+1, cas 2: 6+3+3) et pourtant dans la 1er cas, les 3 colonnes ne tiennent pas sur la mêm ligne.

Je souhaite obtenir a, b et c sur la même ligne avec des col-10, col-1 et col-1 (cas 1), mais cela ne marche pas.

J'ai lu la doc, mais je n'ai pas trouvé la réponse à mon problème.

Merci pour votre aide.

jesuisunepomme

23 mars 2020 à 15:26:41

Bonjour,

Ton code fonctionne avec des éléments plus grand.

Je pense que la grille bootstrap n'est pas faite pour gérer des éléments si petits que tes "col-2>col-1" et que les marges définis de bases par bootstrap (margin:15px) empêchent les éléments de se réduire suffisamment. Créant donc un retour a la ligne.

Je suis un débutant, si un utilisateur avancé pouvait confirmer ce serai top

-
Edité par jesuisunepomme 23 mars 2020 à 15:31:37

MiNiMan.8.6

23 mars 2020 à 15:27:27

Hello, tu veux ça ?

Camile.G

23 mars 2020 à 15:37:41

merci pour vos réponse.

non je veux un col-10 col-1 col-1 avec les 3 éléments sur la même ligne.

J'ai pensé aux marges ou au fait que les éléments soient trop petit, mais j'ai pas trouvé de réponse en ce sens, même si ça peut être ça.

Par exemple : col-8 col-2 col-2 (=12) marche, mais col-9 col-1 col-1 (=11) ne marche pas, bref j'ai du mal à comprendre.

-
Edité par Camile.G 23 mars 2020 à 15:40:03

jesuisunepomme

23 mars 2020 à 15:58:57

Bootstrap défini col-1 comme ayant un padding left et right de 15px.

Ce qui fait que les éléments col-1 ne peuvent être plus petit que 30px de large (32 avec border).

Si les colonnes col-2 font 200px cela fait:

pour col-1: 200/12= ~17px

pour col-9: 200/12*9= 150px

col-1 ne peut pas faire moins de 30px donc 30+30+150= 210px.

ça ne passe pas et les éléments se retrouvent a la ligne.

a contrario:

pour col-2: 200/12*2= ~33px

pour col-8: 200/12*8= ~ 133px

aucun éléments ne fait moins de 30px donc 33+33+133= 200px

ça passe, aucun retour à la ligne n'a lieu.

-
Edité par jesuisunepomme 23 mars 2020 à 16:09:33

Camile.G

23 mars 2020 à 17:33:42

CQFD !!!

Merci pour cette réponse très claire.