Question

鉴于下面的代码，我试图找出显示表单字段的正确方法，然后他们这样做。即前两行显示大约两个自举列，但我希望第三行以全宽显示。

<div class="well">
<div class="row">
    <div class="col-xs-4">
        @Html.LabelFor(m => m.To)
        @Html.EditorFor(m => m.To)
    </div>
</div>
<br />
<div class="row">
    <div class="col-xs-4">
        @Html.LabelFor(m => m.Subject)
        @Html.EditorFor(m => m.Subject)
    </div>
</div>
<div class="row">
    <div class="col-md-10">
        @Html.LabelFor(m => m.Body)
        @Html.EditorFor(m => m.Body)
    </div>
</div>

*******更新******** 将其中一个字段更改为此

  <div class="row">
    <div class="col-md-12">
        @Html.TextBoxFor(m => m.Body, new { @class = "form-control", placeholder = "Body" })
    </div>
</div>

Answer 1

您需要将form-control类应用于输入，因为这会将输入宽度设置为100％，这意味着它们将完全填充列。不幸的是EditorFor不允许你这样做。但是，TextBoxFor会：

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

如何在Bootstrap中控制表单字段宽度？

1 个答案: