如何使用Bootstrap 3将表单中的单独行对齐？

Question

我在使用Bootstrap 3的水平表单上苦苦挣扎。如果我把每个表单组都一个接一个，我没有问题。检查图像：

但是，一旦我做两行，所以我可以把图像前3个输入栏的右侧，一切该行扩展，并与排在底部垂直滋养品得到全乱了：

下面的代码：

<form id="new-user-form" class="form-horizontal"> 
    <div class="row"> 
     <div class="col-sm-9"> 
      <div class="form-group"> 
       <label class="col-md-2 control-label">Nombre</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="fname" placeholder="Nombre" type="text"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-2 control-label">Apellido</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="lname" placeholder="Apellido" type="text"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-2 control-label">Usuario</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="username" placeholder="Nombre de Usuario" type="text" disabled=""> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-3"><div class="form-group"> 
       <div class="col-md-12 text-center"> 
        <img src="img/mysteryman.png" /> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-12"> 
      <div class="form-group"> 
       <label class="col-md-2 control-label">E-mail</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="emailaddress" placeholder="Direcci&oacute;n de e-mail" type="email"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-2 control-label">Tel. Celular</label> 
       <div class="col-md-10 no-padding"> 
        <div class="col-xs-5 col-sm-4"> 
         <input class="form-control" name="codtelcelular" placeholder="C&oacute;digo de Area" type="tel"> 
        </div> 
        <div class="col-xs-7 col-sm-8"> 
         <input class="form-control" name="telcelular" placeholder="Tel&eacute;fono Celular" type="tel"> 
        </div> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-2 control-label">Tel. Fijo</label> 
       <div class="col-md-10 no-padding"> 
        <div class="col-xs-5 col-sm-4"> 
         <input class="form-control" name="codtelfijo" placeholder="C&oacute;digo de Area" type="tel"> 
        </div> 
        <div class="col-xs-7 col-sm-8"> 
         <input class="form-control" name="telfijo" placeholder="Tel&eacute;fono Fijo" type="tel"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

任何想法？提前致谢！

Answer 1

您缺少一行。

<form id="new-user-form" class="form-horizontal"> 
    <div class="row"> 
     <div class="col-sm-9"> 
      <div class="form-group"> 
<div class="row"> 
       <label class="col-md-2 control-label">Nombre</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="fname" placeholder="Nombre" type="text"> 
       </div> 
</div> 
      </div> 

      <div class="form-group"> 
<div class="row"> 
       <label class="col-md-2 control-label">Apellido</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="lname" placeholder="Apellido" type="text"> 
       </div> 
</div> 
      </div> 

      <div class="form-group"> 
<div class="row"> 
       <label class="col-md-2 control-label">Usuario</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="username" placeholder="Nombre de Usuario" type="text" disabled=""> 
       </div> 
    </div> 
      </div> 
     </div> 

     <div class="col-sm-3"><div class="form-group"> 
       <div class="col-md-12 text-center"> 
        <img src="img/mysteryman.png" /> 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-12"> 
      <div class="form-group"> 
       <label class="col-md-2 control-label">E-mail</label> 
       <div class="col-md-10"> 
        <input class="form-control" name="emailaddress" placeholder="Direcci&oacute;n de e-mail" type="email"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-2 control-label">Tel. Celular</label> 
       <div class="col-md-10 no-padding"> 
        <div class="col-xs-5 col-sm-4"> 
         <input class="form-control" name="codtelcelular" placeholder="C&oacute;digo de Area" type="tel"> 
        </div> 
        <div class="col-xs-7 col-sm-8"> 
         <input class="form-control" name="telcelular" placeholder="Tel&eacute;fono Celular" type="tel"> 
        </div> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label class="col-md-2 control-label">Tel. Fijo</label> 
       <div class="col-md-10 no-padding"> 
        <div class="col-xs-5 col-sm-4"> 
         <input class="form-control" name="codtelfijo" placeholder="C&oacute;digo de Area" type="tel"> 
        </div> 
        <div class="col-xs-7 col-sm-8"> 
         <input class="form-control" name="telfijo" placeholder="Tel&eacute;fono Fijo" type="tel"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</form>