Bootstrap - container bouge selon les pages

**dididu85** · 03/09/2015, 13h42

Bonjour,

J'ai réalisé plusieurs pages à l'aide de Bootstrap.
Le header et le footer sont commun à toutes les pages.
Cependant, la position du container bouge selon les pages.
J'ai remarqué que la position varie lorsque je met en place un carrousel ou un panel.

Auriez-vous une idée de la source du problème ?

Merci d'avance pour votre aide.

Code html :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
 
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
    </head>
 
	<body>
		<div class="container">
 
			<div class="page-header">
				<h1>A faire</h1>      
			</div>
 
			<nav class="navbar navbar-default">
				<div class="container-fluid">
				<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">...<span class="sr-only">(current)</span></a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Prestations<span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">...</a></li>
									<li><a href="#">...</a></li>
									<li><a href="#">...</a></li>
									<li><a href="#">...</a></li>
								</ul>
							</li>
							<li><a href="#">...</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav><div class="row">
	<div class="col-sm-6 col-md-4">
		<div class="thumbnail">
			<img src="1.jpg" alt="...">
			<div class="caption">
				<h3>Nom catégorie</h3>
				<p>Petit texte pour decrire la catégorie</p>
			</div>
		</div>
	</div>
 
	<div class="col-sm-6 col-md-4">
		<div class="thumbnail">
			<img src="2.jpg" alt="...">
			<div class="caption">
				<h3>Nom catégorie</h3>
				<p>Petit texte pour decrire la catégorie</p>
			</div>
		</div>
	</div>
 
	<div class="col-sm-6 col-md-4">
		<div class="thumbnail">
			<img src="3.jpg" alt="...">
			<div class="caption">
				<h3>Nom catégorie</h3>
				<p>Petit texte pour decrire la catégorie</p>
			</div>
		</div>
	</div>
</div>			<nav class="navbar navbar-default">
				<div class="container">
					Footer à développer
				</div>
			</nav>
		</div>
 
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/perso.js"></script>
	</body>
</html>

Code html :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
 
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
    </head>
 
	<body>
		<div class="container">
 
			<div class="page-header">
				<h1>A faire</h1>      
			</div>
 
			<nav class="navbar navbar-default">
				<div class="container-fluid">
				<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">...<span class="sr-only">(current)</span></a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Prestations<span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">...</a></li>
									<li><a href="#">...</a></li>
									<li><a href="#">...</a></li>
									<li><a href="#">...</a></li>
								</ul>
							</li>
							<li><a href="#">...</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav><div class="panel panel-default">
		<div class="panel-heading">
		<h4>Formulaire de contact</h4>
		<p>Pour nous contacter, merci de compléter le formulaire ci-dessous.</p>
	</div>
 
	<div class="panel-body">
		<form action="" method="POST">
			<div class="form-group">
				<label>Votre nom</label>
				<input type="text" class="form-control" name="nom" placeholder="À compléter" required>				
			</div>
 
			<div class="form-group">
				<label>Votre email</label>
				<input type="email" class="form-control" name="email" placeholder="À compléter" required>
			</div>
 
			<div class="form-group">
				<label>Sujet</label>
				<input type="text" class="form-control" name="sujet" placeholder="À compléter" required>				
			</div>
 
			<div class="form-group">
				<label>Votre message</label>
				<textarea class="form-control" rows="10" name="message" placeholder="À compléter" required></textarea>
			</div>
 
			<button type="submit" class="btn btn-default">Envoyer</button>
		</form>
	</div>	
</div>			<nav class="navbar navbar-default">
				<div class="container">
					Footer à développer
				</div>
			</nav>
		</div>
 
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/perso.js"></script>
	</body>
</html>

**NoSmoking** · 03/09/2015, 18h35

Bonjour,
je te ferais presque la même réponse que dans cette discussion http://www.developpez.net/forums/d15...e/#post8369755.

Est ce que cela ne serait pas simplement lié à l’apparition d'une scrollbar sur la page ?

- Si tu avais une adresse en ligne on pourrait voir en live.

**dididu85** · 06/09/2015, 11h09

Désolé je n'ai pas de version en ligne.

En effet, le problème est dû à l'apparition d'une scrollbar. Je n'avais pas remarqué ce changement sur ma page.
Peux-t-on apporter une solution afin que le container reste toujours à la même place ?

Merci de votre aide.