Question

我尝试给我的表单添加一个电子邮件输入字段和一个图像按钮。我的按钮和输入并排排列。我想将我的表单放在bootstrap容器类的中间，但我尝试过的任何东西都没有用。我给了我的表格宽度和余量：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;
}

Answer 1

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

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

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

这是 Fiddle ，有效。

如何将表单置于引导容器中间？

1 个答案: