Bonjour, je suis actuellement en train de suivre le cours prenez en main Bootstrap (bien qu'on soit désormais en version 4, l'étudier peut être intéressant )
Bref, sur le chapitre un peu de pratique avec les tigres, je n'arrive pas à avoir l'affichage voulu sur un écran de téléphone.
J'ai repris le code du cours avec "col-xs-4 col-sm-3 col-md-2", bien que les autres affichages fonctionnent lorsque je rétrécis mon écran au minimum les photos sont grossis et il n'y en a qu'une par ligne au lieu de 3 comme indiqué dans le cours.
voici mon code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div class="container">
<header class="page-header">
<h1>Mon amour pour les tigres</h1>
</header>
<section class="row">
<div class="col-lg-12">
<p>
Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux.
</p>
<p>Voici ce qu'en dit le wikipedia :</p>
<blockquote>
Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera.
Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde.
L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur,
il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles.
Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ; le mâle possède
un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.<br>
<small class="pull-right">Wikipedia</small><br>
</blockquote>
</div>
</section>
<section class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre"></div>
</section>
<section class="row">
<aside class="col-sm-4">
<address>
<p>Vous pouvez me contacter à cette adresse :</p>
<strong>Tigrou Alfred</strong><br>
Allée des fauves<br>
28645 Félins-sur-Loire<br>
</address>
</aside>
<div class="col-sm-8">
<img src="images/photo-tigre.jpg" alt="Tigre">
</div>
</section>
</div>
</body>
</html>
Et voici le résultat en image :
md :
sm :
xs :
Cours Bootstrap problème affichage
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.