1485 sujets

Web Mobile et responsive web design

[Résolu] Bootstrap 4 container-fluid espace bottom

Bonjour,

J'ai construit un squelette de site tout simple avec la dernière version de Bootstrap 4. Lorsque je rentre ce code :
<nav>nav</nav>
<div class="container-fluid">
  <div class="row">
      <div class="contenu-de-la-page">
		<h1>titre</h1>
		<p>da.</p>
		<p>bu</p>
		<p>niettch.</p>
      </div>
  </div>
</div>

<footer>footer</footer>

Je me retrouve avec une div.contenu qui ne prend pas toute la largeur alors même qu'elle est dans un container-fluid. Une div est pas censée prendre toute la largeur de la page automatiquement ?

Maintenant, si je reprends le code sans placer ma div.contenu dans un container-fluid, ma div prend bien toute la largeur mais sur Chrome et Safari y a un petit espace blanc qui s'insère entre cette div et footer (espace blanc qui n'apparaît pas sous Firefox Smiley eek ). En forçant le margin/padding/border-bottom de container-fluid/row/contenu-de-la-page ça ne change rien (même chose pour top avec le footer). En retirant le .row, l'espace blanc apparaît toujours.

upload/1510394271-68371-screenshot.png

Ça doit être tout simple et je vais me sentir très bête mais c'est pas grave j'ai l'habitude.

Dans mon CSS je n'ai fait que changer le background-color des div.
Modifié par kzfkz (11 Nov 2017 - 11:17)
Avec bootstrap, ton code doit être construit comme ceci :

.container
  .row
    .col


Sous peine de ne rien avoir d'aligné

-Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
-In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

https://getbootstrap.com/docs/4.0/layout/grid/
Modifié par bzh (11 Nov 2017 - 11:07)
Merci pour ta réponse,
Ah oui mince c'est vrai. Mais le problème persiste, j'ai placé nav, footer et ma div.contenu en suivant la construction que tu/Bootstrap indique(s) sauf que le petit espace entre mon contenu et le footer est toujours là. Pourtant ce même espace apparaît pas entre nav et div.contenu.
upload/1510395260-68371-screenshot2.png

Au moins ma div prend toute la largeur Smiley lol .
Hum j'ai forcé les margin, padding et border à 0 dans le doute pour tous mes éléments mais non ça ne change rien. Je vais devoir me débrouiller autrement en trichant avec le fond d'écran.
Il faudrait que tu mettes le code complet.

J'ai fait un essai rapide et pour moi ça fonctionne

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <style>
  </style>
  <body>
    
    <nav style="background-color: red;">nav</nav>
	<div class="container-fluid" style="background-color: blue;">
	  <div class="row">		  
	      <div class="col contenu-de-la-page">
			<h1>titre</h1>
			<p>da.</p>
			<p>bu</p>
			<p>niettch.</p>
	      </div>
	  </div>
	</div>
	
	<footer style="background-color: yellow;">footer</footer>    
    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>
Oui ton code chez moi fonctionne aussi. Je crois que j'ai encore mal lu la doc Smiley confus parce que j'ai écrit :
<div class="container-fluid">
 <div class="row">
  <div class="col">
   <div class="contenu-de-la-page">
    …
   </div>
  </div>
 </div>
</div>


tandis que, quand je mets la classe .col dans la même div que .contenu-de-la-page j'obtiens effectivement tout ce qui faut (pas d'espace en trop ou quoi).

Du coup, il faut toujours associer .col à une div qui a une autre classe ?

Pour info, voilà c'que j'avais écrit :
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Test</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


	<link rel="stylesheet" href="style.css" />
	<style type="text/css">
		
		nav{
			background-color:#9B0D19;	
		}
		.contenu-de-la-page{
			background-color: royalblue;
		}
		footer{
			background-color:green;
		}

		body{
			background-color:red;
		}
	</style>
</head>
<body>
	<!-- nav -->
	<nav>nav</nav>

	<!-- corps de la page -->
	<div class="container-fluid">
		<div class="row">
			<div class="col">
				<div class="contenu-de-la-page">
					<h1>titre</h1>
					<p>da.</p>
					<p>bu</p>
					<p>niettch.</p>
				</div>
			</div>
		</div>
	</div>
	<footer>footer</footer>

	<!-- scripts -->
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>


</body>
</html>


En tout cas, merci beaucoup pour tes réponses !
Ok, c'est ce qui est expliqué dans l'article que j'avais mis plus haut sur la fusion des marges. L'espace que tu as avec ton footer est celui du dernier paragraphe : <p>niettch.</p>

Un moyen simple d'empêcher cela :


.contenu-de-la-page {
    background-color: royalblue;
    overflow: hidden; /* Annule la fusion des marges */
}

Mais c'est un peu cryptique on est d'accord Smiley cligne

Ce que tu as fais n'est pas faux tant que tu respectes d'abord la structure container > row > col
Meilleure solution
Désolé, j'aurais dû lire avec plus d'attention l'article. J'avais testé en mettant le margin-bottom de .contenu-de-la-page à 0 mais pas celui du dernier <p>.
Je comprends aussi pourquoi la couleur de l'espace entre mes deux div était pas celle du contenant de p, vu que l'espace défini avec margin chope pas la couleur de background-color. Et encore une fois, merci beaucoup d'avoir pris le temps de me répondre !
Modifié par kzfkz (13 Nov 2017 - 21:13)
Sujet clos
Aller à