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

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

我错过了什么？

Answer 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;
}

Answer 2

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

如果你在使用Bootstrap的MVC 4/5 Web应用程序中 - 你不想指定宽度，因为它会击败“响应式”＆＃39;引导能力。

您希望在TextBox中添加一个类，将其设置为100％的宽度，并将其放在您希望的任何Bootstrap宽度列的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>

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

Answer 3

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

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

        .k-datetimepicker {
            width: 100%;
        }

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

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

3 个答案: