Question

如何在自由jqgrid编辑中增加字体和编辑元素大小并添加表单，使它们具有与bootstrap中相同的大小。 Twitter引导程序允许使用表单组和表单控件类（如

）创建具有活动元素hightligh的良好编辑元素

<div class="form-group">
<label for="Kellaaeg">Kell</label>
<input class="form-control" id="Kellaaeg" name="Kellaaeg">
</div>

但是免费的jqgrid确实如此使用不支持这些类。

我试过了 How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

.jqgrow > td input[type=text].editable,
.jqgrow > td input[type=date].editable,
.jqgrow > td input,
.jqgrow > td textarea {
    height: 100%;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
}

.jqgrow > td select.editable,
.jqgrow > td select {
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
}

但这只会改变内联编辑。表单元素仍然很小。如何编辑，添加，查看与bootstrap中相同大小的表单元素？

Answer 1

Bootstrap设置根元素的字体大小，以便您可以使用引用根元素字体大小的rem css单位

.jqgrow > td input[type=text].editable,
.jqgrow > td input[type=date].editable,
.jqgrow > td input,
.jqgrow > td textarea {
    height: 100%;
    width: 100%;
    font-size: 1rem; /* 1rem instead of 1em */
    box-sizing: border-box;
}

.jqgrow > td select.editable,
.jqgrow > td select {
    width: 100%;
    font-size: 1rem; /* 1rem instead of 1em */
    box-sizing: border-box;
}

否则bootstrap的根字体大小为14px

如果自由jqgrid表单编辑，如何增加字体大小和元素高度

1 个答案: