J'ai un problème avec le jumbotron, des espaces blancs apparaissent en dessous pour une raison quelconque, je ne sais pas si c'est à cause de mon code ou d'une erreur que j'ai fait quelque part. J'y suis depuis deux jours maintenant. Je copie le code du jumbotron sur le site bootstrap 4. je pourrais utiliser de l'aide à ce sujet. Comme vous pouvez le voir sur l'image, des espaces blancs apparaissent en dessous.
<div class="container_fluid one"> <!--Navbar --> <nav class="mb-1 navbar navbar-expand-lg navbar-dark orange lighten-1"> <a class="navbar-brand" href="#"><i class='bx bxl-stripe bx-md' style="color:#fffc00;"></i></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555" aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent-555"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#"> <span class="gold">Home</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </nav> <!--/.Navbar --> <section data-aos="zoom-in"data-aos-duration="1900"> <div class="container"> <div class="row"> <div class="col-md-6 text-white info"> <h1>I'll go above and beyond for <span>you.</span></h1> <p>The world's best.</p> <p><span>I am good at what i do.</span></p> <button type="button" class="btn btn-outline-info white">Learn More</button> </div> <div class="col-md-6 text-right"> <img class="img-fluid leader" src="/images/undraw_site_stats_l57q.svg" alt="Responsive image"> </div> </div> </div> </section> <div class="container"> <div class="row"> <div class="col-md-12 text-center down"> <i class='bx bx-down-arrow bx-md bx-fade-down' style="color:#fffc00;"></i> </div> </div> </div> </div> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div> <div class="container_fluid two">
.container_fluid.one {
background-size: cover;
height: 100vh;
background-color: #43E8E4;
}
.nav-item {
padding-right:20px;
font-size: 18px;
}
.info h1 {
margin-top: 170px;
line-height: 50px;
}
.info p {
font-size: 15px;
}
span {
color: #fffc00;
}
span .gold{
color: #fffc00;
}
.info p {
font-size: 18px;
}
.white {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
color: #fffc00;
}
.leader {
margin-top: 110px;
width: 457px;
height: 316px;
}
.down {
margin-top: 60px;
}
.container_fluid.two {
background-size: cover;
min-height: 100vh;
background-color: #43E8E4;
}
.jumbotron {
margin-top: 0px;
} 
4 Réponses :
C'est à cause de:
.jumbotron-override {
margin-bottom: 0px;
}
Donc, si vous voulez supprimer cela, donnez simplement une classe à votre div par exemple: jumbotron-override et ajoutez ce code à css:
.jumbotron {
margin-bottom: 2em;
}
Le résultat peut être vu sur jsfiddle: https://jsfiddle.net/nabtron/1kesqj8f/4/ (page complète: https://fiddle.jshell.net/nabtron/1kesqj8f/4/show/ )
J'espère que cela résout votre problème :)
Incluez ces lignes de code dans votre fichier CSS
.jumbotron {
margin-bottom: 0px;
}
J'ai essayé de remplacer votre code en commentant margin-bottom: 2rem; puis les espaces blancs disparaissent
.jumbotron {
/* padding: 2rem 1rem; */
/*margin-bottom: 2rem; */
background-color: #e9ecef;
border-radius: .3rem;
}
J'ai dû mettre !important après la margin: 0px pour que ça marche
.jumbotron {
margin-bottom: 0px!important;
}
Il peut y avoir une marge sur les éléments à l'intérieur, éventuellement h1, avez-vous inspecté les éléments?
Hobbs Pixel a dit dans une réponse d'utiliser
.jumbotron {padding-bottom:1px;}