Html 引导程序 4：在超大屏幕中居中内联形式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42474298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 4: center inline form inside a jumbotron
提问by Michael Coker
I have an inline form inside a jumbotron. I want to center it.
我在大屏幕里面有一个内联表单。我想居中。
I tried using text-align:centeron the jumbotron and it did center all the other elements inside the jumbotron except for the inline form element. So I don't know what is going wrong here.
我尝试text-align:center在 jumbotron 上使用，它确实将 jumbotron 内的所有其他元素居中，除了内联表单元素。所以我不知道这里出了什么问题。
This is the HTML 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>
This is the CSS:
这是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;
}
回答by Michael Coker
Use the justify-content-centerhelper class on the form. That will center the contents with the flex property justify-content: center;
使用justify-content-center辅助类的form。这将使内容与 flex 属性居中justify-content: center;
#home{
background-image: url('../img/jumbotron-bkg-2.jpg');
margin-top: 50px;
text-align: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<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 justify-content-center">
<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>