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是分配给文本框容器的空间。您不能通过增加类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

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

您可以通过添加

来指定课程

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 3

您可以使用 HtmlAttributes 关键字将TextBox的对象与new一起传递

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

现在你的css为

.widthNew{
    100px;
}

Answer 4

您可以使用文本框并使用style属性和 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上更改TextBox大小

4 个答案: