[Résolu] Cours Bootstrap problème affichage - Prenez en main bootstrap première pratique par EwenLefloch - page 1

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

Prenez en main bootstrap première pratique

Cours Bootstrap problème affichage

Supprimer

Modérer

Signaler le message aux modérateurs