如何使用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>