Kendo：启用浮动标签的全宽

Question

我开始使用新的浮动标签，但我注意到控件（否则为全宽）现在已调整为默认大小。这是我的代码：

<div class="form-group">
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.ContactPersonName)
              .HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })
              .Label(l => l.Content("Name *").Floating(true)))
    </div>
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.Mobile)
              .HtmlAttributes(new { @class = "form-control numeric phone", style = "width: 100%;" })
              .Label(l => l.Content("Mobile # *").Floating(true)))
    </div>
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.Email)
              .HtmlAttributes(new { @class = "form-control", style = "width: 100%;" })
              .Label(l => l.Content("Email *").Floating(true)))
    </div>
</div>

<div class="form-group">
    <div class="col-sm-8">
        @(Html.Kendo().TextBoxFor(m => m.TRN)
              .HtmlAttributes(new { @class = "form-control", maxlength = "15", style = "width: 100%;" })
              .Label(l => l.Content("Tax Registration # *").Floating(true)))
    </div>
</div>

<div class="form-group">
    <div class="col-sm-8">
        @(Html.Kendo().TextBoxFor(m => m.SponsorName)
              .HtmlAttributes(new { @class = "form-control", maxlength = "100", style = "width: 100%;" })
              .Label(l => l.Content("Sponsor Name *").Floating(true)))
    </div>
    <div class="col-sm-4">
        @(Html.Kendo().TextBoxFor(m => m.TradeLicenseNo)
              .HtmlAttributes(new { @class = "form-control numeric", maxlength = "20", style = "width: 100%;" })
              .Label(l => l.Content("Trade License # *").Floating(true)))
    </div>
</div>

看起来，浮动标签为 HTML 添加了一些包装元素，width: 100% 样式没有相应地形成。

这是生成的标记：

如何设置此表单的样式以占据 bootstrap 单元格的宽度。

Answer 1

我通过在 Edge 的控制台中创建新样式来解决这个问题：

span.k-floating-label-container {
  width: 100%;
}

Kendo：启用浮动标签的全宽

Kendo: Full width with floating labels enabled

kendo-asp.net-mvc

asp.net-mvc-5.2