我无法调整 MVC5 Bootstrap TextAreaFor 宽度

Question

我现在已经努力了好几个小时才能在引导选项卡上呈现一个完整的宽度和几行的注释字段。我想要的是这样的：

到目前为止，我所做的是寻找解决方案/帖子，但没有一个对我有用。我的剃须刀代码是：

<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 和 site）分别调整为：

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 提到的引导网格、行和列。 See

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

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

然后应用这个 css：

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

Answer 2

所以再深入一点，这样你就可以理解它是如何工作的。

首先，row 元素最多可以有 12 列。

Documentation

例如，使用您提供的内容：

<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>

您的 labels 每个都有一个名为 col-md-2 的类，这意味着它们在一行中占据 2 列。所以既然你有 2 个标签（model.Project.sysUser_Add 和 model.Project.sysDD_Add），那么你真的占用了 4 列。因此，在该行被填满之前，您还有 8 列。因此，您的 TextBoxFor 占这 8 列，因为您的 TextBoxFor 每个都在 div 内，其中有名为 col-md-4 的类。 4 + 4 = 8。

现在采用该逻辑并将其应用于您的TextAreaFor。

您有一个标签，其类为col-md-2，因此在该行被填满之前您还有 10 列。截至目前，您的TextAreaFor 位于div 中，即col-md-8。 8 + 2 = 10。在填充该行之前，您仍有 2 列可供使用。因此，将您的TextAreaFor 所在的div 更改为col-md-10。 10 + 2 = 12。这应该调整您的 TextAreaFor 以使用全角来匹配您的 TextBoxFors。

这是一个有效的demo。

如果这有帮助，请告诉我！

Answer 3

将col-md-8 更改为col-md-10 将变为width: 100%

Answer 4

根据文档 (Link)，行类应该在容器类中。

Answer 5

VS 2017 解决方案

如果您只想定位一个对象，可以直接将其添加到新的 {} 属性中。textarea 宽度由 cols 属性控制，因此原始 HTML 会将基于百分比的项目平衡到 100%，因此 40-40 -40% 相当于它们所在对象的 33-33-33% 或 ~100%。

@Html.TextAreaFor(model => model.Project.sysNotes
    , new { @class = "form-control", @rows="3",  @cols = "40%" })

引导

Bootstrap 完全是另一种动物。我花了几天时间才弄清楚是什么限制了生成表单中的对象的宽度。

3 个相关项目。可以引用与生成的 [div] 相关的：.form-control、.form-group & .form-row。 *** 我将所有表单组对象切换为表单行对象，因为它们在行之间留下的空间比表单组对象少，因此滚动更少。

将此添加到您的样式表中以允许最大宽度。然后您可以覆盖要缩小的 [div] 的宽度。

<style>
    .form-control {
        width: 100%;
        max-width: 100%;
    }

    .form-group {
        width: 100%;
        max-width: 100%;
    }

    .form-row {
        width: 100%;
        max-width: 100%;
    }

</style>

然后覆盖您希望缩小的 [div] 中的代码。

<div class="form-row" style="width: 320px">