bootstrap 4: centre inline forme à l'intérieur d'un jumbotron
J'ai une ligne de formulaire à l'intérieur d'un jumbotron. Je veux de centre.
J'ai essayé d'utiliser text-align:center
sur le jumbotron et il n'centre de tous les autres éléments à l'intérieur de la jumbotron, sauf pour la ligne d'élément de formulaire. Je ne sais donc pas ce qui ne va pas ici.
Voici le code HTML:
<div class="jumbotron" id="home">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why you should download this fantastic app!</p>
<hr class="my-4">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline">
<label class="sr-only" for="yourEmail">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="yourEmail" placeholder="Your Email">
</div>
<button type="button" class="btn btn-primary my-2 my-sm-0">Sign Up</button>
</form>
</div>
C'est le CSS:
body{
position: relative;
}
#home{
background-image: url('../img/jumbotron-bkg-2.jpg');
margin-top: 50px;
text-align: center;
}
#yourEmail{
width: 350px;
}
#about h2, #about-summary{
text-align: center;
}
.card{
margin-bottom: 30px;
}
.card img{
height: 350px;
width: 100%;
}
#cards-container{
margin-bottom: 50px;
padding: 20px 40px;
}
#download{
text-align: center;
padding-top: 100px;
padding-bottom: 150px;
background-color: #0afff2;
}
Êtes-vous à l'aide de bootstrap 3 ou 4?
bootstrap 4. La version alpha
bootstrap 4. La version alpha
OriginalL'auteur | 2017-02-26