帶有標籤以上輸入和EasyUI控件的Bootstrap form-group

Question

我創建了一個表單，我希望在輸入上方有標籤。這可以通過使用form-group類來完成。一切工作正常，但如果我用EasyUI控件替換標準輸入，它會打破預期的佈局。這裏是我的代碼：

<form> 
    <div class="form-group col-sm-6"> 
     <label for="name" class="control-label">Line Height</label> 
     <input class="form-control" style="width:200px" id="name"/> 
    </div> 
    <div class="form-group col-sm-6"> 
     <label for="name1" class="control-label">Padding Top</label> 
     <input class="form-control" style="width:200px" id="name1"/> 
    </div> 
</form> 
<form> 
    <div class="form-group col-sm-6"> 
     <label for="name2" class="control-label">Display Name</label> 
     <input class="form-control easyui-textbox" style="width:200px" id="name2" /> 
    </div> 
    <div class="form-group col-sm-6"> 
     <label for="name3" class="control-label">Start Screen</label> 
     <input class="form-control easyui-textbox" style="width:200px" id="name3"/> 
    </div> 
</form> 

Fiddle

當調整其大小也沒有遵循正確的包裝。任何想法？

感謝

Answer 1

包裹input的內線另一div保持label s提高，防止倒塌。

<form> 
    <div class="form-group col-sm-6"> 
     <label for="name2" class="control-label">Display Name</label> 
     <div> 
      <input class="form-control easyui-textbox" style="width:200px" id="name" /> 
     </div> 
    </div> 
    <div class="form-group col-sm-6"> 
     <label for="name3" class="control-label">Start Screen</label> 
     <div> 
      <input class="form-control easyui-textbox" style="width:200px" id="name1" /> 
     </div> 
    </div> 
</form> 

--> Check JSFiddle here <--