如何使用 Kendo UI Web 布局简单、对齐的表单

Question

刚刚进入 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-label，看到它并认为我会尝试它...没有帮助。

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

Answer 1

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

            .k-textbox {
                width: 11.8em;
            }

            label {
                display: inline-block;
                width: 90px;
                text-align: right;
            }

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