窗體水平引導

即時通訊使用自舉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>

來源

2017-07-02 Alonso Contreras

全部投入這是很容易achievalbe使用行和cols如下

<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>

來源

2017-07-02 07:06:35 Aravind

窗體水平引導

回答

相關問題