非常に醜い結果、私はブートストラップとスプリングMVCを使用してい

Question

フォームのフィールドを揃えるために、ブートストラップを使用して3

私は、ブートストラップのグリッドシステムを使用し、いくつかのフォームを持っているが、それはで 仕事をしませんか少なくとも私はそれが正しいとは思わない。

私は春のタグライブラリを使用していますので、これは私のコードです：

<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

.rowまたは.colクラスを使用する必要はありません。ブートストラップにはフォームの特別な処理があります。

あなたは.form-groupクラスを持つすべての入力+ラベルをラップし、それは次のようになりますので、入力にform-controlを追加する必要があります。

<div class="form-group"> 

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

あなたはまた、より詳細

Answer 2

ためhereをできご覧くださいhtml/springラベルタグを使用します。

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

それだけでは与えられたフィールドの上にラベルをレンダリングします。