Bootstrap內聯表單按鈕對齊

Question

按鈕對齊後驗證不正確。

<form class="form-inline form-padding"> 
     <div class="form-group"> 
      <div class="input-group"> 
       <input class="form-control" placeholder="First Name" name="firstname" type="text" /> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="input-group"> 
       <input class="form-control" placeholder="Last Name" name="lastname" type="text" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="input-group"> 
       <button type="submit" id="form-button" class="btn btn-primary">Load</button> 
      </div> 
     </div> 
    </form> 

輸入驗證碼：

$('form').validate({ 
     rules: { 
      firstname: { 
       minlength: 3, 
       maxlength: 15, 
       required: true 
      }, 
      lastname: { 
       minlength: 3, 
       maxlength: 15, 
       required: true 
      } 
     }, 
     highlight: function(element) { 
      $(element).closest('.form-group').addClass('has-error'); 
     }, 
     unhighlight: function(element) { 
      $(element).closest('.form-group').removeClass('has-error'); 
     }, 
     errorElement: 'span', 
     errorClass: 'help-block', 
     errorPlacement: function(error, element) { 
      if(element.parent('.input-group').length) { 
       error.insertAfter(element.parent()); 
      } else { 
       error.insertAfter(element); 
      } 
     } 
    }); 

形式的偉大工程，但此刻我點擊Load按鈕按鈕的排列是不妥當的。我無法創建小提琴，我附上了相同的屏幕截圖。

表單提交

之前之後表單提交

按鈕對準後驗證不妥當的。

Answer 1

添加此CSS對齊形式重新正確：

.form-inline > .form-group { 
    vertical-align: top; 
} 

http://jsfiddle.net/Au33X/