带有输入和EasyUI控件上方标签的Bootstrap表单组

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，并防止崩溃。

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