TextAreaFor无法设置宽度

MGo*_*t90 18 razor twitter-bootstrap asp.net-mvc-5 twitter-bootstrap-3

我无法在atextarea中设置宽度或列数.行/高度工作正常.请有人帮忙谢谢!

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)
    @Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10})
    @Html.HiddenFor(model => model.UserName, new { UserName = @User.Identity })

    <div class="form-group">
        <div class="col-md-10">
            <input type="submit" value="Submit Feedback" class="btn btn-default" />
        </div>
    </div>
}
Run Code Online (Sandbox Code Playgroud)

任何建议或提示都会受到极大的批评!谢谢

呈现的HTML是(出于安全原因,我删除了名称和值文本:

<form action="/feedback/create" method="post"><input name="" type="hidden" value="">        
<textarea name="Comments" id="Comments" rows="10" cols="60"></textarea>
<input name="UserName" id="UserName" type="hidden" value="" username="System.Security.Principal.WindowsIdentity">        

<div class="form-group">
        <div class="col-md-10">
            <input class="btn btn-default" type="submit" value="Submit Feedback">
        </div>
 </div>
Run Code Online (Sandbox Code Playgroud)

编辑:

我可以通过CSS设置textarea的宽度,但只能设置为某个exten(可能是屏幕的15%)

MGo*_*t90 38

所以我想通了,我相信这是导入到ASP.NET MVC5项目的引导程序的问题.答案很简单.只需设置CSS

    max-width: 1000px;
    width: 1000px;
Run Code Online (Sandbox Code Playgroud)

这修复了所有数据类型.Textarea,输入等

****更新8/26/2014****

改变了我的回答,以反映发布的评论.使用百分比而不是px来保持响应能力.CSS应该是:

    max-width: 100%;
    width: 100%;
Run Code Online (Sandbox Code Playgroud)

****UPDATE 8/29/2016****

这是使用Bootstrap 3修复的.添加应用上述样式的类form-control

     @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" })
Run Code Online (Sandbox Code Playgroud)

  • @ MikeGO10590:检查出来:如果将max-width更改为100%而不是1000px,则会返回引导大小调整功能.你甚至不需要费心设置宽度. (2认同)
  • **自从提出这个问题以来,这可能已在 BS3 中得到修复**。使用“行”是首选答案。`@Html.TextAreaFor(x =&gt; x.Note, new { @class = "form-control", rows = "3" })`。 (2认同)

小智 11

这似乎是一种后退,以防止脚手架视图生成全宽度输入表单.

但是现在我们知道它已被设置我们可以在类中直接覆盖它,也可以直接在元素上覆盖它(下面简单地为了简单起见).

关键是要记住设置max-width来覆盖site.css中的一个以及宽度CSS属性.

@Html.TextAreaFor(model => model.Comments, 10, 120, htmlAttributes: new {style="width: 100%; max-width: 100%;" }) 
Run Code Online (Sandbox Code Playgroud)


And*_*NET 5

您可以添加类属性:

@Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10, @class="form-control" })
Run Code Online (Sandbox Code Playgroud)


小智 5

我有同样的问题,发现我的Site.css中的以下CSS是原因(我注释掉了).

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
Run Code Online (Sandbox Code Playgroud)