Asp.net 用css设置kendoui样式文本框的宽度

我知道这样做可以更改文本框的宽度

@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" })

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

---

我遗漏了什么？

您的CSS定义是错误的

.k-textbox.medium

意味着您有一个带有

class=“k-textbox”

的DOM元素，在这个DOM元素中有另一个带有

class=“medium”

的元素，这不是您的情况。只要去掉CSS规则中的空格：

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

---

这真的很晚了，但我认为这个主题有一个重要的更新

如果您使用的是带有引导功能的MVC4/5Web应用程序，您不希望指定宽度，因为这会破坏引导功能的“响应”能力

您需要向文本框添加一个类，将其设置为100%的宽度，并将其放置在任意引导宽度列的div中：

例如，我的全班同学是：

.wide-full {
    width: 100%;
}

现在，假设你的地址模型中有一个城市字段，在剃刀表单上

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

@Html.LabelFor（model=>model.City，新的{@class=“控制标签col-sm-2 col-md-2 col-lg-2”}）
@Html.TextBoxFor（model=>model.City，新的{@class=“text box单行宽满”}）
@Html.ValidationMessageFor（model=>model.City）

---

现在，当查看设备发生变化时，您的文本框会与您的响应设计发生反应，并处理新的所需宽度。

我使用剑道，我已将其添加到razor应用程序中的“我的布局”页面中，工作正常：

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

        .k-datetimepicker {
            width: 100%;
        }

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

.k-numerictextbox{
宽度：100%；
}
.k-datetimepicker{
宽度：100%；
}
.k-textbox{
宽度：100%；
}

Hi Darin，k-textbox确实存在。我想在k-textbox的顶部添加一些样式，k-textbox是小-中-大的，以确定其宽度。我已经更新了我的答案。您应该在CSS规则中删除

.k-textbox

和

.medium

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