使用bootstrap来对齐表单字段的结果非常难看

Question

我正在使用带有bootstrap 3的spring mvc。

我有一些表格，我使用了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-horizontal，对于标签，我添加了control-label类。

Answer 1

您不需要使用$state.go('stateName');或.row课程。 Bootstrap对表格有特殊处理。

您需要使用.col类包装每个输入+标签，并将.form-group添加到输入中，因此它应如下所示：

form-control

有关详细信息，请参阅here

Answer 2

您也可以使用html / spring标签。

参考文献： What is the advantage of form:label tag in Spring? https://www.w3schools.com/tags/tag_label.asp

它会在给定字段上方呈现标签。