Une marge inutile se créer Bootstrap par ArthurSanglier1 - page 1

Bonjour,

J'ai un probleme avec Bootstrap. Une marge que je ne veux absolument pas se créer a gauche de chaque élément que je mets ici des photos. Comment je peux faire pour les supprimer ?

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
    <title>NOM DU SITE</title>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div id="menu" class="col-lg-12" style="border: 1px solid red;">
          <nav class="navbar navbar-inverse fixed-top">
            <div class="container">
                <div class="navbar navbar-header">
                  <a href="#" class="navbar-brand">Nom Du Site</a>
                </div>

                <div>
                  <ul class="nav navbar-nav">
                    <li><a href="#">SWEAT</a></li>
                    <li><a href="#">T-SHIRT</a></li>
                  </ul>
                </div>

            </div>

          </nav>
        </div>
        <div id="gif" class="col-lg-12 js-fullheight img-fluid" style="border: 1px solid red;background-image: url(./video.gif)" src="./video.gif">
          <img src="./video.gif" alt="" class="img-fluid" style="">
        </div>
        <div id="photo" class="col-lg-6" style="border: 1px solid red;">
          <div class=" overlay-image _bl "><a href="URL_LIEN">
            <img class=" image _bm " src="./mannequin1.jpg" alt="Alt text" />
            <div class=" normal _bo ">
              <div class=" text _2 "></div>
              </div>
              <div class=" hover _bn ">
                <div class=" text _2 ">SWEAT</div>
                </div>
              </a></div>
            </div>
            <div id="photo" class="col-lg-6" style="border: 1px solid red;">
              <div class=" overlay-image _bl "><a href="URL_LIEN">
                <img class=" image _bm " src="./mannequin2.jpg" alt="Alt text" />
                <div class=" normal _bo ">
                  <div class=" text _2 "></div>
                  </div>
                  <div class=" hover _bn ">
                    <div class=" text _2 ">T-shirt</div>
                    </div>
                  </a></div>
                </div>
        <div id="footer" class="col-lg-12" style="border: 1px solid red;">

        </div>
      </div>
    </div>
  </body>
</html>

body {
  margin: 0px;
}

#gif img{
  width:1903px;
  height: 1083px;
}
.row{
  margin:0;
  padding:0;
}
.navbar {
   position: fixed;
}
#menu a{
  font-size: 30px;
}
/* Conteneur principal */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Image originale */
.overlay-image .image {
 display: block;
 width: 950px;
 height: 740px;
}
/* Texte original */
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}
/* Overlay */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 740px;
 width: 950px;
 opacity: 0;
 transition: .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
}
/********* Hover background et texte uniquement *******/
.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}

Bonjour,

Ton erreur c'est tu n'utilises pas la row class comme il faut

En fait, je te conseilles à chaque fois que tu dois créer une nouvelle colonne, il faut qu'elle soit précédée par une row pour éviter les bug des marges

Donc en gros, en faisant un row avant ton id="photo" alors j'arrive à supprimer la marge : https://codepen.io/MehdiX/pen/LYEKQpa?editors=1100

Cependant, je ne peux régler le problème car il faudrait que tu nous représente un codePen ou jsFiddle avec uniquement le code où le problème persiste et supprimer les styles additionnels, car là dès que je fais une manip, il y'a des styles qui empêchent de faire ce que je veux.

Donc le plus important c'est d'appliquer la théorie du row, et adapter ton code par rapport à cela

On reste à ta disposition pour d'autres questions

Une marge inutile se créer Bootstrap

Une marge inutile se créer Bootstrap

Supprimer

Modérer

Signaler le message aux modérateurs