Site responsif - Bootstrap

Question

Elydia

25 Jun 2019 à 18:10

Bonsoir,

Je commence uniquement à utiliser Bootstrap, cependant je rencontre quelques petits soucis avec ce système de grid. J'ai fait un premier site test, afin de m'exercer et je n'arrive pas à correctement utiliser mon élément en aside, à le mettre sur le côté de mes articles. Il se met automatiquement en dessous un article et non pas sur la même ligne, ce qui ne correspond pas à ce que je souhaite. Tout le reste fonctionne cependant bien.
Je ne sais pas ce que je dois modifier afin de réussir à le positionner..

Voici le code HTML : (La chose que je n'arrive pas à positionner est la partie du "Qui suis je ?")


<!doctype html>
<html lang="en">
  <head>
    <!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="style.css">


    <title>Site</title>
  </head>

  <body>


<!-- navbar -->
<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark black info-color">
  <a class="navbar-brand" href="#"><img class="logo" src="logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
    aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent-4">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">
          <i class="fab fa-facebook-f"></i> Facebook
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="fab fa-instagram"></i> Instagram</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-user"></i> Profil </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
          <a class="dropdown-item" href="#">Mon compte</a>
          <a class="dropdown-item" href="#">Se déconnecter</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<!--/.Navbar -->


<!-- Slider -->
<div class="row">
  <div class="col-lg-12">

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://lorempixel.com/output/nightlife-q-c-900-600-5.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://lorempixel.com/output/technics-q-g-900-600-7.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://lorempixel.com/output/city-q-c-900-600-9.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://lorempixel.com/output/nature-q-g-900-600-3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>

  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>
<!-- Blog -->

<br> 

<div class="container"> 
  <div class="row">
  <div class="col-lg-3"><img src="http://lorempixel.com/output/city-q-g-320-200-4.jpg"></div>
  <div class="col-lg-4 offset-2">  <h1>Titre</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie egestas enim. Mauris at faucibus nunc, id rhoncus tellus. In hac habitasse platea dictumst. Duis scelerisque lectus quis risus rhoncus accumsan. Suspendisse vitae diam ac odio ultricies lacinia vel et neque. Integer vehicula tellus non orci ultrices, semper mollis erat interdum.</div>
  </div>

<aside>
<div class="col-lg-2 offset-10">
  <h2>Qui suis-je ?</h2>
  <img src="http://lorempixel.com/output/people-q-g-150-100-9.jpg">
  <br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie egestas enim. Mauris at faucibus nunc, id rhoncus tellus. In hac habitasse platea dictumst. Duis scelerisque lectus quis risus rhoncus accumsan. Suspendisse vitae diam ac odio ultricies lacinia vel et neque. Integer vehicula tellus non orci ultrices, semper mollis erat interdum.
</div>
</aside>

<br>
</div>

<hr color="black">
<div class="container"> 
<div class="row">
  <div class="col-lg-3"><img src="http://lorempixel.com/output/city-q-g-320-200-4.jpg"></div>
  <div class="col-lg-4 offset-2">  <h1>Titre</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie egestas enim. Mauris at faucibus nunc, id rhoncus tellus. In hac habitasse platea dictumst. Duis scelerisque lectus quis risus rhoncus accumsan. Suspendisse vitae diam ac odio ultricies lacinia vel et neque. Integer vehicula tellus non orci ultrices, semper mollis erat interdum.</div>
</div>
<br>

<hr color="black">

<div class="row">
  <div class="col-lg-3"><img src="http://lorempixel.com/output/city-q-g-320-200-4.jpg"></div>
  <div class="col-lg-4 offset-2"><h1>Titre</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie egestas enim. Mauris at faucibus nunc, id rhoncus tellus. In hac habitasse platea dictumst. Duis scelerisque lectus quis risus rhoncus accumsan. Suspendisse vitae diam ac odio ultricies lacinia vel et neque. Integer vehicula tellus non orci ultrices, semper mollis erat interdum.</div>
</div>


</div>

<br>
<!-- Footer -->
<div class="row footer"> 
  <div class="col-lg-4 black"><strong>Nous contacter</strong>

    <br>
    Mail : ...@gmail.com
    <br>
    Numéro de téléphone : 0712365478
    <br>
    Localisation : Paris, France
    <br>

  </div>

  <div class="col-lg-4 black"><strong>Conditions générales</strong></div>
  <div class="col-lg-4 black"><strong>Catégories</strong>

    <li>Texte</li>
    <li>Texte</li>
    <li>Texte</li>
  </div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Et le code CSS est simple pour le moment :



aside{
    padding: 10px;
    font-size: 0.5em; 
    text-align: justify;
}

.container{
	text-align: justify;
}


.logo{
height: auto;
width: 20%;
}

.container{
	font-size:0.9em;
}


h2{
	font-size:26px;
}

Merci pour votre future aide.

Felipe

Administrateur

26 Jun 2019 à 10:03

Bonjour,

j'ai c/c une partie de ton code (les 3 premiers blocs) dans Bootply : https://www.bootply.com/dujL0IgKBb
et réindenté + ajouté des CSS de debug.
Pas mal de remarques :
- les classes .col-* n'ont d'effet que si elles sont enfants directs d'un élément avec la classe .row. Ici aside est enfant de .row mais n'a pas de classe .col-* tandis que son enfant .col-* n'a pas de parent avec .row.
- indenter au cordeau ton code te permet de voir la hiérarchie d'éléments : là tu fermes un div en fin de ligne, etc ça complique la lecture et donc le débogage (en fait c'est plutôt préventif avec l'habitude).
- offset-* va créer un grand espace blanc à gauche. .offset-10 crée un énorme espace à gauche, en fait pousserait à droite ton aside de largeur 2. S'il doit s'afficher sur la même ligne que d'autres blocs, à leur droite, il suffit que la somme des .col-N et .offset-L des blocs précédents fasse 10 (ou 10+12=22 ou 34 ou 46 ce qui fera plusieurs lignes et tac il reste 2 pour ton aside)

EDIT :
- Le texte devrait être balisé par des paragraphes, pas des div.
- <br> devrait être remplacé par du padding vertical si c'est le but. Si c'est pour aller à la ligne après une grille, il y a un souci de conception : Bootstrap s'occupe tout seul d'afficher ce qui suit une grille sous cette grille, à gauche sans qu'il y ait besoin de préciser quoi que ce soit.
Modifié par Felipe (26 Jun 2019 - 10:06)

Sujet clos

Web Mobile et responsive web design

Site responsif - Bootstrap