Группа форматов Bootstrap с надписями над входами и элементами управления EasyUI

Question

Я создаю форму, в которой я хочу иметь надписи над входами. Это можно сделать, используя класс группы форм. Все работает нормально, но если я заменю стандартные входы элементами управления 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 s внутри другого div для поддержания label сек и предотвращения разрушения.

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