フォーム水平ブーツストラップ

Question

私はブートストラップhoritonzalフォームを使用しています しかし、私は各行に3つのフォームがありますが、私はいくつかの行を持つ水平なフォームと同じ効果を得るために単一のフォームをしたい。しかし、私は各行に3つのフォームがありますが、私はいくつかの行を持つ水平のフォームと同じ効果を得るために単一のフォームを持っていると思います。

私の考えは、検証を行うことであり、そのために私は、単一のフォーム

<form class="form-horizontal" name="frm1" role="form"> 
    <div class="form-group"> 

     <label for="txtNombre" class="col-sm-2 control-label">Nombre</label> 
     <div class="col-xs-3"> 
      <input type="text" class="form-control" id="txtNombre" ng-model="model.nombre" placeholder="Rut"> 
     </div> 


     <label for="txtRut" class="col-sm-1 control-label">Rut</label> 
     <div class="col-xs-2"> 
      <input type="text" class="form-control" id="txtRut" placeholder="Rut"> 
     </div> 
     <div class="col-sm-1"> 
      <input type="password" id="txtDv" class="form-control" id="inputPassword3" placeholder="Dv"> 
     </div> 
    </div> 
</form> 

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 

     <label for="txtMail" class="col-sm-2 control-label">Email</label> 
     <div class="col-sm-3"> 
      <input type="text" class="form-control" id="txtMail" placeholder="e-mail"> 
     </div> 


     <label for="txtAlias" class="col-sm-1 control-label">Alias</label> 
     <div class="col-xs-3"> 
      <input type="text" class="form-control" id="txtAlias" placeholder="Alias"> 
     </div> 
    </div> 
</form> 

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 

     <label for="selEmpresa" class="col-sm-2 control-label">Empresa</label> 
     <div class="col-sm-3"> 
      <select class="form-control" id="selEmpresa"> 
       <option>Audi</option> 
      </select> 
     </div> 


     <label for="chkActive" class="col-sm-1 control-label">Activo</label> 
     <div class="col-xs-3"> 
      <input type="checkbox" id="chkActive"> 
     </div> 
    </div> 
</form> 

Answer 1

ですべての入力を含める必要がある。これは、簡単に以下のように行とcolsを使用してachievalbe

<form class="form-horizontal" name="frm1" role="form"> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 

      <label for="txtNombre" class="col-sm-2 control-label">Nombre</label> 
      <div class="col-xs-3"> 
       <input type="text" class="form-control" id="txtNombre" ng-model="model.nombre" placeholder="Rut"> 
      </div> 


      <label for="txtRut" class="col-sm-1 control-label">Rut</label> 
      <div class="col-xs-2"> 
       <input type="text" class="form-control" id="txtRut" placeholder="Rut"> 
      </div> 
      <div class="col-sm-1"> 
       <input type="password" id="txtDv" class="form-control" id="inputPassword3" placeholder="Dv"> 
      </div> 
     </div> 

</div></div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 

      <label for="txtMail" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-3"> 
       <input type="text" class="form-control" id="txtMail" placeholder="e-mail"> 
      </div> 


      <label for="txtAlias" class="col-sm-1 control-label">Alias</label> 
      <div class="col-xs-3"> 
       <input type="text" class="form-control" id="txtAlias" placeholder="Alias"> 
      </div> 
     </div> 
    </div></div> 

    <div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 

      <label for="selEmpresa" class="col-sm-2 control-label">Empresa</label> 
      <div class="col-sm-3"> 
       <select class="form-control" id="selEmpresa"> 
        <option>Audi</option> 
       </select> 
      </div> 


      <label for="chkActive" class="col-sm-1 control-label">Activo</label> 
      <div class="col-xs-3"> 
       <input type="checkbox" id="chkActive"> 
      </div> 
     </div> 
    </div> 
    </div> 
    </form>