更改文本区域的宽度和高度答案

【问题标题】：change the width and height of text area更改文本区域的宽度和高度
【发布时间】：2014-09-19 14:14:22
【问题描述】：

我有带有 bootstrap3 的 MVC5 应用程序，其中一个字段应该有长文本框，

目前我使用以下代码，当我尝试将宽度更改为 1000 时，注意到发生了。此外，我尝试删除 col-md-10 类和文本框旁边向左移动一点什么都没有发生......

我想把它改大，我该怎么做？

<div class="form-group">
    @Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
    </div>
</div>

【问题讨论】：

标签： html css asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

在 TextArea 上设置固定宽度会破坏引导程序为您的应用程序带来的响应性目的。您应该在类中添加“form-control”以使文本区域填充其容器。

@Html.TextBoxFor(model => model.Service, new { @class = "form-control" })

另一种选择是声明您自己的自定义 css 样式并在 textarea 上使用它

@Html.TextBoxFor(model => model.Service, new { @class = "custom-width" })

风格

.custom-width {
    width: 700px !important; <-- add important!
}

【讨论】：

谢谢，但我什至尝试将其更改为 width: 1800px !important;什么都没有改变，知道什么会导致这个问题吗？

【解决方案2】：

试试这个：

<div class="form-group">
    @Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px !important;" })
    </div>
</div>

PS : 注意使用 !important 关键字

【讨论】：

!important 关键字仅应在绝对没有其他选项时使用。而且通常还有另一种选择……