html - 在 Bootstrap 4 Alpha 6 中对齐表单？

Question

随着 Bootstrap 4 的新 Alpha 6 更新，表单对齐似乎依赖于一些新类，我尝试在 CSS 中添加 .mx-auto 类和 display: block 类，但似乎没有任何改变.

这是我的代码，任何人都可以阐明我如何将简单的表单放在屏幕中央吗？

<section id="form">
   <div class="container">
       <div class="row">

                <div class="col-md-12">
                    <form class="form-inline" role="form" method="post">
                        <input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">
                        <button type="submit" class="btn btn-signup" name="submit" value="send">sign up</button>
                    </form>

              </div>

        </div>  
    </div>
</section>

这是在 Alpha 5 中工作的 CSS。现在我明白文本对齐不再工作了。

#form {
    text-align:center;
    color:white;
}

Answer 1

将 justify-content-center 类添加到您的表单中:

<section id="form">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <form class="form-inline justify-content-center" role="form" method="post">
          <input type="email" class="form-control form-control-sm" name="email" placeholder="enter your email">
          <button type="submit" class="btn btn-signup" name="submit" value="send">sign up</button>
        </form>
      </div>
    </div>  
  </div>
</section>