使用 css 设置 kendoui 样式文本框的宽度答案

【问题标题】：Setting width of kendoui styled textbox with css使用 css 设置 kendoui 样式文本框的宽度
【发布时间】：2019-10-21 14:37:16
【问题描述】：

我知道您可以通过此操作更改文本框的宽度

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

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

我错过了什么？

【问题讨论】：

标签： asp.net css asp.net-mvc kendo-ui

【解决方案1】：

你的 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;
}

【讨论】：

嗨，Darin，k-textbox 确实存在。我想在 k-textbox 的顶部添加更多样式，它是 small medium large 以确定它的宽度
我已经更新了我的答案。您应该删除 CSS 规则中 .k-textbox 和 .medium 之间的空格。

【解决方案2】：

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

如果您在使用 Bootstrap 的 MVC 4/5 Web 应用程序中 - 您不想指定宽度，因为这会破坏引导程序的“响应”能力。

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

例如，我的wide-full类是：

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

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

【讨论】：

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

【解决方案3】：

我正在使用剑道，并且已将其添加到剃须刀应用程序的 _layout 页面中，效果很好：

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

        .k-datetimepicker {
            width: 100%;
        }

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

【讨论】：