Partage
  • Partager sur Facebook
  • Partager sur Twitter

Cours Bootstrap problème affichage

Prenez en main bootstrap première pratique

Sujet résolu
    22 avril 2019 à 15:48:38

    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 :


    • Partager sur Facebook
    • Partager sur Twitter

    Cours Bootstrap problème affichage

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown