bootstrap 4：jumbotron中的内联形式 [英] bootstrap 4: center inline form inside a jumbotron

问题描述

我在jumbotron里面有一个内联表单。我想集中它。

我曾尝试在jumbotron上使用 text-align：center ，它确实将所有其他元素集中在jumbotron除了内联表单元素。所以我不知道这里出了什么问题。

这是HTML代码：

 < div class =jumbotronid =home> 
< h1 class =display-3> My Awesome App！< / h1> 
< p class =lead>这就是为什么您应该下载这个梦幻般的应用！< / p> 
< hr class =my-4> 
< p>想知道更多？加入我们的邮件列表！< / p> 
< form class =form-inline> 
< label class =sr-onlyfor =yourEmail>电子邮件< / label> 
< div class =input-group mb-2 mr-sm-2 mb-sm-0> 
< div class =input-group-addon> @< / div> 
< input type =textclass =form-controlid =yourEmailplaceholder =Your Email> 
< / div> 
< button type =buttonclass =btn btn-primary my-2 my-sm-0>注册< /按钮> 
< / form> 
< / div> 
  

这是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; 
宽度：100％; 
} 
 
＃cards-container {
 margin-bottom：50px; 
 padding：20px 40px; 
} 
 
 #download {
 text-align：center; 
 padding-top：100px; 
 padding-bottom：150px; 
背景颜色：＃0afff2; 
 
  

解决方案使用 justify-content-center 表单上的helper类。这将以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 =stylesheet/>< div class =jumbotron id =home> < h1 class =display-3> My Awesome App！< / h1> < p class =lead>这就是为什么您应该下载这个梦幻般的应用程序！< / p> < hr class =my-4> < p>想知道更多？加入我们的邮件列表！< / p> < form class =form-inline justify-content-center> < label class =sr-onlyfor =yourEmail>电子邮件< / label> < div class =input-group mb-2 mr-sm-2 mb-sm-0> < div class =input-group-addon> @< / div> < input type =textclass =form-controlid =yourEmailplaceholder =Your Email> < / DIV> < button type =buttonclass =btn btn-primary my-2 my-sm-0>注册< /按钮> < / form>< / div>

I have an inline form inside a jumbotron. I want to center it.

I tried using text-align:center on 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.

This is the HTML code:

<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:

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

解决方案

Use the justify-content-center helper class on the form. That will center the contents with the flex property 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>

这篇关于bootstrap 4：jumbotron中的内联形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！