剑道：全角并启用浮动标签

问题描述

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

<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%样式并未相应地成形。

这是生成的标记：

如何设置此表单的样式以占据引导程序单元格的宽度。

解决方法

我通过在Edge的控制台中创建新样式来弄清楚了：

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