html - 调整 TextAreaFor 的宽度

Question

我有一个表单，其中包含一些 TextBoxFor 和 1 个 TextAreaFor

这里是:

<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(m => m.FromName, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.FromName, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.FromName)
        </div>
    </div>

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

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

    <div class="form-group">
        @Html.LabelFor(m => m.Message, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextAreaFor(m => m.Message,60, 150, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Message)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-primary" value="Send" />
        </div>
    </div>

</div>

它的外观图片:

问题是我无法调整 TextAreaFor 的宽度。

我知道 Bootstrap 网格系统限制了这一点，但我不认为这应该是不可能的，只需将标签保持在原处，而是使文本区域更宽而不是更高。

我正在寻找的是我的 TextAreaFor 比常规 TextBoxFor 更宽。我曾尝试将离谱的数字插入到 TextAreaFor 的 int rows && int columns 参数中，但似乎唯一有效的是 int行。

关于如何让我的 TextAreaFor 扩展到整个页面有什么想法吗？

感谢任何帮助。

更新:

我创建了这个 Bootply为你们所有人。

Answer 1

我想通了。检查元素后，我看到所有的 input、textarea 和 select 都有一个 max-width 280px。

所以我所要做的就是给 textarea 一个类并将它的 max-width 设置为我喜欢的东西。