如何在引导容器中间居中表单？答案

【问题标题】：How to center a form in the middle of bootstrap container?如何在引导容器中间居中表单？
【发布时间】：2014-11-03 19:00:19
【问题描述】：

我尝试为我的表单提供一个电子邮件输入字段和一个图像按钮。我的按钮和输入并排对齐。我想将我的表单放在引导容器类的中间，但我尝试过的任何方法都没有奏效。我给表单设置了宽度和边距：0 自动，但它根本没有帮助。

HTML：

<div class="container">
        <div class="text-box-two">
            <span id="notification">BE NOTIFIED WHEN WE LAUNCH:</span>
        </div>
            <form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/>
                        </div>
                        <div class="form-group button">
                            <input type="image" src="images/tree.png" name="submitEmail" class="button"/>
                        </div>
                </div>
            </form>
    </div>
</div>

CSS：

.well.email-form{
background-color: #FFFFFF !important;
border: none !important;
border-radius: 1px !important;
}
#emailForm{
width:1115px;
margin:0 auto;
}
.form-group{
float:left;
}
#emailForm{
margin:0 auto;
}
.form-control{
height:102px;
border-radius:1px;
font-size:30px;
}

【问题讨论】：

你能把我们链接到JSFiddle
您可以尝试将表单包裹在<div class='row'><div class='col-lg-12 text-justify'></div></div>
还好吗？？？ jsfiddle.net/wzr4crfr/13

标签： html twitter-bootstrap

【解决方案1】：

使用 Bootstrap 框架来执行此操作。查看文档中的 offsetting columns。

在上面的容器中试试这个。

<div class="container col-sm-8 col-sm-offset-2">

这是一个 Fiddle，它正在工作。

【讨论】：