css - 使用 bootstrap 对齐表单字段的结果非常丑陋

Question

我正在使用 spring mvc 和 bootstrap 3。

我有一些表单，其中我使用了 bootstrap 的网格系统，但它没有 工作，或者至少我认为它不正确。

我正在使用 spring 标签库，所以这是我的代码:

 <form:create id="fc_cliente" modelAttribute="cliente" path="/cliente" render="${empty dependencies}" customtitle="false">

   <div class="row">
            <div class="col-xs-6 col-md-6">
                <field:input id="c_cliente_email" field="email" mail="true"/>
            </div>
            <div class="col-xs-6 col-md-6">
                <field:input id="c_cliente_emailFatturazione" field="emailFatturazione" mail="true"/>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-6">
                <field:input id="c_cliente_telefono" field="telefono"/>
            </div>
            <div class="col-xs-6 col-md-6">
                <field:input id="c_cliente_fax" field="fax" />
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-6">
                <field:input id="c_cliente_codifica" field="codiceIdMacchine" />
            </div>
            <div class="col-xs-6 col-md-6">
                <field:checkbox id="c_cliente_invioMail" field="invioMail" />
            </div>
     </div>

</form:form>

结果是:

我认为字段必须更加对齐，不是吗？

如果是，我哪里错了？

表单有 form-horizo​​ntal 标签，我添加了 control-label 类。

Answer 1

您不需要使用 .row 或 .col 类。 Bootstrap 对表单有特殊处理。

您需要用 .form-group 类包装每个 input+label，并将 form-control 添加到 inputs，所以它应该看起来像这样:

<div class="form-group">

  <field:input id="c_cliente_emailFatturazione" class="form-control" field="emailFatturazione" mail="true"/>
</div>

参见 here了解更多详情