twitter-bootstrap - 我希望我的 Bootstrap 表单居中对齐，我使用了 BS Form 的标准类，但表单始终向左对齐

Question

我为margin:0 auto 和center-alignment 使用了各种类，但没有奏效。

 <div class="container">
    <div class="col-md-12 newsletter">
                <form action="#" method="post">                   
                    <div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
                             <label for="email">Email address:</label>
                             <input type="email" class="form-control" id="email">
                        </div>

              <div class="clearfix"></div>

                        <div class="form-group col-md-6 col-xs-10 col-sm-10 col-lg-4">
                            <label for="email">Email address:</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                </form> 
              </div>
       </div>

Answer 1

您可以将 -offset- 类添加到带有 col- 类的 div 中。例如：

<div class="form-group col-md-offset-4 col-md-6 col-xs-10 col-sm-10 col-lg-4">

col-md-offset-4 将添加额外的空间，因此带有标签的输入将居中。有关更多信息，请阅读本文档

UPD你也可以使用 flexbox。将此 CSS 样式应用于您的代码：

.newsletter {
  display: flex;
  justify-content: center;
}

但请记住，您需要使用表单组类名称从 div 中删除引导类（col-md、col-xs 等）。您可以在此处查看使用 flexbox 的工作示例

HTML：

<div class="container">
    <div class="col-md-12 newsletter">
                <form action="#" method="post">                   
                    <div class="form-group">
                             <label for="email">Email address:</label>
                             <input type="email" class="form-control" id="email">
                        </div>

              <div class="clearfix"></div>

                        <div class="form-group">
                            <label for="email">Email address:</label>
                            <input type="email" class="form-control" id="email">
                        </div>
                </form> 
              </div>
       </div>

CSS：

.newsletter {
  display: flex;
  justify-content: center;
}

Answer 2

尝试这个：

在这里查看演示

HTML：

<div class="container">
  <div class="row">
    <div class="section-form">
      <div class="col-md-12 newsletter">
        <form action="#" method="post">
          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>

          <div class="clearfix"></div>

          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS：

.section-form {
  max-width:550px;
  margin:auto;
}