4

刚刚进入 Kendo UI Web，并试图找出布局简单表单的最佳方法。坦率地说，我对缺乏执行这样一项基本任务的文档感到有点震惊。我正在使用 kendo.bootstrap 主题并试图弄清楚如何组织一个简单的表单，其中标签位于一列中，相关的输入位于另一列中，两者都正确对齐等。

如果您按照文档创建带有文本框控件和标签的简单表单，则文本框控件无法正确对齐……即使在它们的示例中也是如此。

使用以下代码来演示这一点：

<div>
<ul class="forms">
    <li>
        <label class="k-label">Username:</label>
        <input type="text" class="k-textbox" />         
    </li>
    <li>
        <label class="k-label">Password:</label>
        <input type="text" class="k-textbox" />         
    </li>
</ul>

不确定是否需要 k 标签，看到它并认为我会尝试它......没有帮助。

我查看了所有样式文档，但没有看到任何有助于创建简单但样式化的表单的内容。Kendo UI Web 是否提供任何固定或流动的网格系统来帮助布局表单，或者用户是否对此负责？谢谢...

4

2 回答 2

4

据我所知，Kendo 不提供任何表单布局（但 Kendo Mobile 提供）。那将取决于用户。一般来说，为标签提供 CSS 固定宽度很简单，如下所示。

            .k-textbox {
                width: 11.8em;
            }

            label {
                display: inline-block;
                width: 90px;
                text-align: right;
            }
于 2013-04-15T00:41:12.493 回答
2

剑道确实提供了这一点。您只需要使用 kendo.common.min.css 中的类 editor-label 和 editor-field

例子：

<div class="editor-label">
    @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Description, new { style="width:500px;" })
    @Html.ValidationMessageFor(model => model.Description)
</div>
于 2014-05-06T18:28:49.963 回答