在 asp.net MVC5 上更改文本框大小

Question

我的视图中有以下输入：

<div class="form-group">
    @Html.LabelFor(model => model.Detail, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Detail)
        @Html.ValidationMessageFor(model => model.Detail)
    </div>
</div>

我想增加文本框的宽度。我已经更改了 col-md-x 值，但没有任何改变。如何更改这部分代码的文本框宽度？谢谢

Answer 1

col-md-x 是分配给文本框容器的 space。您不能通过增加 class col-md-x 来增加文本框的大小，只能增加容器的大小。

如果您使用的是 ASP.NET MVC 5.1，您可以使用：

@Html.EditorFor(model => model.Detail, new { htmlAttributes = new { @class = "largeTextBox" } })

在你的 .css

.largeTextBox {
    50px;
}

如果您使用的是旧版本的 ASP.NET MVC，您应该使用 @Html.TextBoxFor 而不是 @Html.EditorFor。这支持 HTML 个属性。

@Html.EditorFor(model => model.Detail, new { @class = "largeTextBox" }, })

更多信息，请参阅 What's New 部分

Answer 2

您可以使用 new 关键字将 HtmlAttributes 的对象传递给 TextBox 作为

@Html.EditorFor(model => model.Detail, new { @class = "widthNew" });

现在您的 css 为

.widthNew{
    100px;
}

Answer 3

您可以根据需要应用各种 col- class，而不是创建自定义 class。使用这些将确保网站保持响应 - 请参阅 http://getbootstrap.com/css/#forms-control-sizes

您可以通过添加

来指定class

new { @class = "col-md-3"}

这导致

<div class="form-group">
    @Html.LabelFor(model => model.Detail, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Detail, new { @class = "col-md-3"})
        @Html.ValidationMessageFor(model => model.Detail)
    </div>
</div>

Answer 4

您可以使用文本框并将样式属性与 new 关键字一起使用，如下例所示

@Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })

也可以用于LabelFor

@Html.LabelFor(model => model.Detail, "Detail", new { @class = "control-label col-md-4", style = "width:160px" })

在 asp.net MVC5 上更改文本框大小

Change TextBox Size on asp.net MVC5

c#

asp.net

twitter-bootstrap