引导程序

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）调整为resp。：

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下面的评论，新的screendump：

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

编辑（上次）：我接受了T_Roy的答案，可以采用的方式，但最终解决了我当前问题的是Laiman的附加组件（hack）。我仍然在我的解决方案中看到奇怪的行为，但它确实有效，现在需要继续。然而，我将不得不重构并更多地理解它们如何一起工作。

谢谢大家！

Answer 1

将col-md-8更改为col-md-10它会使width: 100%

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 列。因此，对于这8列的TextBoxFor帐户，因为您的TextBoxFor每个都在div内，其中的类名为col-md-4。 4 + 4 = 8。

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

您的标签的类别为col-md-2，因此在该行填充到容量之前，您有 10 列。截至目前，您的TextAreaFor位于div col-md-8内。 8 + 2 = 10 。在填充该行之前，您仍然需要使用 2 列。因此，将div所在的TextAreaFor更改为col-md-10。 10 + 2 = 12 。这应该调整您的TextAreaFor以使用全宽度来匹配您的TextBoxFor。

这是一个有效的demo。

请告诉我这是否有帮助！

Answer 3

您应该实际使用 T_Roy 中提到的引导网格，行和列。 See

对于您自己的css解决方案，您可以执行此操作。在TextArea输入

中添加长宽类

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

然后应用此css：

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

Answer 4

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

Answer 5

根据文档（Link），行类应该在容器类中。

我无法调整MVC5 Bootstrap TextAreaFor Width

5 个答案:

引导程序