twitter-bootstrap TextAreaFor 无法设置宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22229873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TextAreaFor Cannot Set Width
提问by MGot90
I cannot set the width or cols in atextarea. Rows/Height works just fine. can someone please help thanks!
我无法在 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>
}
Any advice or tips would be greatly appricated! thanks
任何建议或提示将大大appricated！谢谢
The HTML rendered is (I removed name and value text for security reasons:
呈现的 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>
EDIT:
编辑：
I can set the width of the textarea via CSS but only to a certain exten ( maybe 15% of the screen)
我可以通过 CSS 设置 textarea 的宽度，但只能设置到一定程度（可能是屏幕的 15%）
回答by MGot90
so I figured it out, I believe this is a problem with bootstrap imported to a ASP.NET MVC5 project. The answer is easy though. Just set CSS too
所以我想通了，我相信这是导入到 ASP.NET MVC5 项目的引导程序的问题。答案很简单。也只需设置 CSS
max-width: 1000px;
width: 1000px;
That fixes it for all datatypes. Textarea, input, etc.
这修复了所有数据类型。文本区域、输入等
**** UPDATE 8/26/2014****
****更新 8/26/2014****
Changed my answer to reflect on a comment posted. Use percentages rather then px to keep responsiveness. The CSS should be:
更改了我的答案以反映发布的评论。使用百分比而不是 px 来保持响应能力。CSS应该是：
max-width: 100%;
width: 100%;
**** UPDATE 8/29/2016****
****更新 8/29/2016****
This was fixed with Bootstrap 3. Add the class form-controlwhich applies the above styling
这已通过 Bootstrap 3 修复。添加应用上述样式的类表单控件
@Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" })
回答by Sebastian Rogers
This appears to be a fall back to prevent the scaffolded views generating full width entry forms.
这似乎是防止脚手架视图生成全宽输入表单的一种后退。
However now we know that it is being set we can override it locally either in a class or directly on the element (shown purely for simplicity below).
但是现在我们知道它正在被设置，我们可以在类中或直接在元素上本地覆盖它（纯粹为了简单起见在下面显示）。
The key is to remember to set max-width to override the one in site.css as well as the width CSS property.
关键是要记住设置 max-width 以覆盖 site.css 中的一个以及 width CSS 属性。
@Html.TextAreaFor(model => model.Comments, 10, 120, htmlAttributes: new {style="width: 100%; max-width: 100%;" })
回答by Andrés Nava - Azure
You can add a class attribute:
您可以添加一个类属性：
@Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10, @class="form-control" })
回答by Rawden Hoff
I had the same issue and found the following piece of CSS in my Site.css to be the cause (which I commented out).
我遇到了同样的问题，并发现我的 Site.css 中的以下 CSS 是原因（我已注释掉）。
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
回答by Murali Murugesan
Your code works fine for me. Check out the fiddle demo
你的代码对我来说很好用。查看fiddle demo
The problem would be with style=width:something
问题在于 style=width:something
Better check the CSS and try to fix with the help of firebug/chrome console
更好地检查 CSS 并尝试在 firebug/chrome 控制台的帮助下修复
