在 Bootstrap 4 Alpha 6 中对齐表格？

Question

随着 Bootstrap 4 的新 Alpha 6 更新，表格对齐似乎依赖于一些新的 classes，我尝试添加 .mx-auto class随着显示：CSS 中的块 class 但是似乎没有任何东西移动它。

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

<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

在 Bootstrap 的新 Alpha 6 更新中 4 “form-inline” class 获得 display[= 的新声明21=] 属性值为“flex”。

为了让表格居中，需要设置为“块”。

.form-inline{ display: block; }

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

Answer 2

将 justify-content-center class 添加到您的表单中：

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

在 Bootstrap 4 Alpha 6 中对齐表格？

Align form in Bootstrap 4 Alpha 6?

html

css

twitter-bootstrap

alpha