使用CSS设置Kendoui样式文本框的宽度

Question

我知道你可以通过以下方式更改文本框的宽度

@Html.TextBoxFor(m => m.LoginId, new { @class = "k-textbox", style="width:400px" })

但我希望您能提供更简洁的方法。

我尝试将此内容添加到一个新的CSS文件中。

.k-textbox .small {
    width: 50px !important;
}
.k-textbox .medium {
    width: 120px !important;
}
.k-textbox .large {
    width: 320px !important;
}

在我的cshtml文件中：

@Html.TextBoxFor(m => m.LoginId, new { @class = "k-textbox medium" })

但是这并不起作用。文本框的大小仍然保持不变。

我错过了什么？

- Null Reference

Answer 1

您的CSS定义有误。

.k-textbox.medium表示您有一个DOM元素，其class="k-textbox"，并且在此DOM元素内部还有另一个class="medium"的元素，而这不是您的情况。只需在CSS规则中去掉空格即可：

.k-textbox.small {
    width: 50px !important;
}
.k-textbox.medium {
    width: 120px !important;
}
.k-textbox.large {
    width: 320px !important;
}

- Darin Dimitrov

---

嗨，Darin，k-textbox确实存在。我想在k-textbox的基础上添加几种样式，即小型、中型和大型，以确定其宽度。 - Null Reference

我已经更新了我的回答。你应该在CSS规则中.k-textbox和.medium之间去掉空格。 - Darin Dimitrov

Answer 2

虽然时间有点晚了，但我认为这个主题的重要更新...

如果你在一个带有Bootstrap的MVC 4/5 Web应用程序中 - 你不想指定宽度，因为那样会破坏Bootstrap的“响应式”能力。

你需要向TextBox添加一个类来将其设置为100%的宽度，并将其放置在任何你想要的Bootstrap宽度列的div中：

例如，我的wide-full类如下:

.wide-full {
    width: 100%;
}

现在，假设您的地址模型中有一个城市字段，并且在Razor表单中...

<div class="row">
    @Html.LabelFor(model => model.City, new { @class = "control-label col-sm-2 col-md-2 col-lg-2" })
   <div class="col-sm-4 col-md-4 col-lg-4">
        @Html.TextBoxFor(model => model.City, new { @class = "text-box single-line wide-full" })
        @Html.ValidationMessageFor(model => model.City)
    </div>
</div>

现在，当查看设备变化时，您的文本框会根据您的响应式设计做出反应，并处理新的所需宽度。

- Robert Achmann

---

如果kendoui的k-textbox没有定义宽度，即使在引导版本的样式表中也是很棒的。他们可能不应该这样做。 - PilotBob

Answer 3

我正在使用Kendo，并在Razor应用程序的_layout页面中添加了这个，它可以正常工作：

<style>
        .k-numerictextbox {
            width: 100%;
        }

        .k-datetimepicker {
            width: 100%;
        }

        .k-textbox {
            width: 100%;
        }
    </style>

- Tony Ryan