在 Bootstrap 4 Alpha 6 中对齐表格？

Question

随着 Bootstrap 4 的新 Alpha 6 更新，表单对齐似乎依赖于一些新类，我尝试在 CSS 中添加带有 display: block 类的 .mx-auto 类，但似乎没有任何东西可以移动它.

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

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

Answer 2

在 Bootstrap 4 的新 Alpha 6 更新中，“form-inline”类获得了值“flex”的 display 属性的新声明”。

为了让表格居中，需要将其设置为“block”。

.form-inline{
  display: block;
}

希望这能解决您的问题。谢谢:)