twitter-bootstrap - 在输入和 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 <--