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

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>

小提琴

调整大小时也没有遵循正确的包装.任何的想法？

谢谢

Answer 1

将inputs 包裹在另一个内部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>

- >在这里检查JSFiddle < -