Partage
  • Partager sur Facebook
  • Partager sur Twitter

Une marge inutile se créer Bootstrap

    31 janvier 2020 à 10:20:51

    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);
    }
    




    • Partager sur Facebook
    • Partager sur Twitter
      31 janvier 2020 à 11:47:50

      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

      • Partager sur Facebook
      • Partager sur Twitter

      Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

      Une marge inutile se créer Bootstrap

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