web-dev-qa-db-fra.com

Bootstrap 4 rangées s'étendent à l'extérieur du conteneur

Je travaille sur un site Web simple pour mon patron. J'ai décidé d'essayer d'utiliser bootstrap et j'ai opté pour la version 4. J'ai donc un assez bon modèle structuré et j'ai remarqué que la ligne pour le contenu principal s'étend au-delà des limites de la div du conteneur. Il est la seule ligne de la page qui fait cela. J'ai essayé de changer l'espacement avec une marge ou un remplissage sur l'un ou les deux éléments et cela ne semble rien changer. J'ai également essayé de contenir le contenu principal à l'intérieur d'une balise de section, puisque l'autre deux lignes sont contenues dans les balises d'en-tête/pied de page et elles restent dans les limites. Cela n'a pas fonctionné non plus. Il me manque probablement quelque chose d'évident ici. Merci pour toute aide, je l'apprécie.

capture d'écran

J'ai mis en surbrillance le conteneur juste pour montrer sa boîte englobante. J'ai également supprimé le rembourrage dans cette capture d'écran, c'est le même problème de toute façon.

    <!doctype html>
<html lang="en">
  <head>
    <title>Air Technology West</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- fontawesome CDN embed -->
    <script src="https://use.fontawesome.com/f13a1bd68c.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>
    <div class="container">
      <!-- Header area -->
      <header class="pt-3 px-3">
        <div class="row">
          <div class="col-md-6">
            <a href="#"><img class="logo" src="img/logo1.png"></a>
          </div>

          <div class="col-md-6">
            <ul class="contact-info">
              <li class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</li>
              <li class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax fa-fw"></i> xxx-xxx-xxxx</li>
            </ul>
          </div>
        </div><!--END ROW-->
    </header>

    <nav class="navbar navbar-expand-md nav-main d-flex flex-row">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-main-toggle" aria-controls="nav-main-toggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="fa fa-bars fa-2x"></span><span class="btn-collapse"> MENU</span>
  </button>
      <div class="collapse navbar-collapse" id="nav-main-toggle">
        <div class="nav navbar-nav mr-auto">
          <p class="nav-item"><a class="nav-link px-3" href="#">Home</a></p>
          <p class="nav-item"><a class="nav-link px-3" href="#">About Us</a></p>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Compressors</a>
              <a class="dropdown-item" href="#">Spray Equipment</a>
              <a class="dropdown-item" href="#">Parts & Accessories</a>
              <a class="dropdown-item" href="#">All Major Products</a>
            </div>
          </li>
          <p class="nav-item"><a class="nav-link px-3" href="#">Services</a></p>
          <p class="nav-item"><a class="nav-link px-3" href="#">Contact Us</a></p>
        </div>
      </div>
    </nav>

    <!--===========END header area==============-->

    <!--===========CAROUSEL area================-->
    <div id="carousel-main" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-main" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-main" data-slide-to="1"></li>
        <li data-target="#carousel-main" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <a href="#"><img class="d-block w-100" src="img/headline_compressors.PNG" alt="First slide"></a>
        </div>

        <div class="carousel-item">
          <a href="#"><img class="d-block w-100" src="img/headline_spray.PNG" alt="Second slide"></a>
        </div>

        <div class="carousel-item">
          <a href="#"><img class="d-block w-100" src="http://via.placeholder.com/720x300" alt="Third slide"></a>
        </div>
      </div><!--END CAROUSEL INNER-->
      <a class="carousel-control-prev" href="#carousel-main" 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="#carousel-main" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!--===========END carousel area============-->

    <!--===========PAGE content==============-->
    <section id="page-content">
      <div class="row">
        <aside class="col-md-3">
          <div class="card mt-3">
            <a href="#">
              <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
              <div class="card-body">
                <p class="card-text">Service</p>
              </div>
            </a>
          </div>

          <div class="card mt-3">
            <a href="#">
              <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
              <div class="card-body">
                <p class="card-text">Products</p>
              </div>
            </a>
          </div>

          <div class="card mt-3">
            <a href="#">
              <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
              <div class="card-body">
                <p class="card-text">Parts & accessories</p>
              </div>
            </a>
          </div>
        </aside>

        <article class="main col-md-9 col-sm-12 px-3 mt-3">
          <p>This is the main content area</p>
        </article>
      </div><!--END ROW-->
    </section><!--END PAGE CONTENT-->
    <!--============END page content===============-->

    <!--=============footer area===============-->
    <footer class=" my-3 px-3">
      <div class="row">

        <div class="col-sm-6">
          <h3 class="border-bottom">Quick links</h3>
          <nav class="nav row nav-footer">
            <a class="nav-link col-md-4 col-sm-6" href="#">Products</a>
            <a class="nav-link col-md-4 col-sm-6" href="#">Services</a>
            <a class="nav-link col-md-4 col-sm-6" href="#">About Us</a>
            <a class="nav-link col-md-4 col-sm-6" href="#">Contact Info</a>
            <a class="nav-link col-md-4 col-sm-6" href="#">Directons</a>
            <a class="nav-link col-md-4 col-sm-6" href="#">Site Map</a>
          </nav>
        </div>

        <div class="col-sm-6 contact-info">
          <h3 class="border-bottom">Contact Info</h3>
          <p class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</p>
          <p class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax fa-fw"></i> xxx-xxx-xxxx</p>
          <p class="address"><i class="fa fa-map-marker fa-fw"></i> ADDRESS</p>
        </div>

      </div><!--END ROW-->
    </footer>
    <!--==============END footer area================-->

  </div><!--===============END CONTAINER===============-->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

Modifier: ajoutez le fichier styles.css.

html{
  font-family: verdana, helvetica, sans-serif !important;
}

nav a{
  color: black;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
}

.nav .nav-link, .nav .dropdown-item {
  color: black;
}

.dropdown-toggle{
  color: black;
}

.nav a:hover{
  border-bottom: 3px solid black;
  margin-bottom: -3px;
}

.nav a:active{
  background-color: grey;
  color: white;
}

.navbar{
  padding: .1rem;
}

.navbar-toggler{
  margin-left:auto;
  margin-right: auto;
}
/*********************3. LAYOUT********************/
#carousel-main{
  position:relative;
}

.carousel-button-right{
  position: absolute;
  bottom: 2rem;
  right: 25%;
}

.carousel-button-left{
  position: absolute;
  bottom: 2rem;
  left: 25%;
}

.carousel-button-center{
  position: absolute;
  bottom: 30px;
  right: 50%;
}
/*********************4. MODULES*******************/

/********4.1 HEADER *********/
.logo{
  height: auto;
  max-width: 100%;
}

.contact-info{
  list-style: none;
  text-align: right;
}

.fnt-sm{
  font-size: .75rem;
}

.ph-local{
  font-size: 1.75rem;
}

/********4.2 MAIN NAV********/

.btn-collapse{
  font-size: 2.2rem;
  font-weight: bold;
}

/********FOOTER********/

.border-bottom{
  border-bottom: 1px solid black;
}

/*********************5. STATES********************/

/*********************6. THEME*********************/

body{
  background-image: url("../img/escheresque_ste.png");
  background-repeat: repeat;
}

header, footer, .navbar, .main{
  background-color: white;
}

@media (max-width: 767px) {
  header *{
    text-align:center;
  }

  nav .nav-item{
    text-align: center;
  }


  aside{
    display: none;
  }
}

@media (max-width: 575px) {
  footer *{
    text-align: center;
  }

  footer nav .nav-item{
    text-align: center;
  }

}

@media (min-width: 576px) {
  footer.contact-info *{
    text-align: right;
  }
}
htmltwitter-bootstrapbootstrap-4twitter-bootstrap-4
5
Matt

Le .row dans bootstrap donne une marge à droite et à gauche de -15px, remplacez-le par un style en ligne = "margin: auto" et ça devrait aller.

Le côté a un remplissage par défaut à gauche et à droite de 15, dans votre cas, vous devez définir le remplissage à gauche sur 0 pour que le contenu s'adapte correctement à la grille.

<section id="page-content">
  <div class="row" style="margin: auto">
    <aside class="col-md-3" style="padding-left: 0">
      <div class="card mt-3">
        <a href="#">
          <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Service</p>
          </div>
        </a>
      </div>

      <div class="card mt-3">
        <a href="#">
          <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Products</p>
          </div>
        </a>
      </div>

      <div class="card mt-3">
        <a href="#">
          <img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Parts & accessories</p>
          </div>
        </a>
      </div>
    </aside>

    <article class="main col-md-9 col-sm-12 px-3 mt-3">
      <p>This is the main content area</p>
    </article>
  </div><!--END ROW-->
</section><!--END PAGE CONTENT-->
7
Brock Reed

utilisez la classe mr-0 au lieu de style="margin-right: 0" c'est le bootstrap 4 voies.

5
Olivier Van de Velde

Ajouter des "no-gutters" à vos bootstrap 4 lignes est également une belle façon de se débarrasser des marges et des rembourrages.

Les gouttières entre les colonnes de nos classes de grille prédéfinies peuvent être supprimées avec .no-gutters. Cela supprime les marges négatives de .row et le remplissage horizontal de toutes les colonnes enfants immédiates.

https://getbootstrap.com/docs/4.1/layout/grid/#no-gutters

4
ohryan