css - 我无法调整 MVC5 Bootstrap TextAreaFor 宽度

Question

为了在 Bootstrap 选项卡上呈现一个具有完整宽度和几行的注释字段，我现在正在努力几个小时。我想要的是这样的:

到目前为止，我所做的是寻找解决方案/帖子，但没有一个适合我。我的 Razor 代码是:

<div class="tab-pane" id="notes">
<br />
<div class="row">
    <div class="form-group">
        @Html.LabelFor(model => model.Project.sysNotes, new { @class = "col-md-2 control-label" })
        <div class="col-md-8">
            @Html.TextAreaFor(model => model.Project.sysNotes, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysNotes, "", new { @class = "text-danger" })
        </div>
    </div>
</div>
<div class="row">
    <div class="form-group">
        @Html.LabelFor(model => model.Project.sysUser_Add, new { @class = "col-md-2 control-label" })
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.Project.sysUser_Add, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysUser_Add, "", new { @class = "text-danger" })
        </div>
        @Html.LabelFor(model => model.Project.sysDD_Add, new { @class = "col-md-2 control-label" })
        <div class="col-md-4">
            @Html.TextBoxFor(model => model.Project.sysDD_Add, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Project.sysDD_Add, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

我将 css 文件(bootstrap、bootstrap-sandstone 和站点)分别调整为:

textarea.form-control {
width: 100%;
height: 200px;}

和

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

我能做什么？？？

编辑:另见@T_Roy 下方的评论，新的屏幕转储:

也许，错误的渲染是否与 _layout.cshtml 有关？

编辑(上次):我接受T_Roy 的回答，要走的路，但最终解决我当前问题的是Laiman 的附加组件(hack)。我仍然在我的解决方案中看到奇怪的行为，但它有效并且现在需要继续。然而，我将不得不重构并更多地了解它们是如何协同工作的。

谢谢大家!

Answer 1

您应该像 T_Roy 提到的那样实际使用 bootstrap 网格、行和列。 See

对于您自己的 css 解决方案，您可以这样做。在 TextArea 输入中添加 long-width 类

@Html.TextAreaFor(model => model.Project.sysNotes, new { @class = "form-control long-width" })

然后应用这个 css:

.long-width {
  min-width: 90%;
}