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

Question

鉴于下面的代码，我试图找出正确的方法来显示比它们更宽的表单字段。即前两行显示大约两个 Bootstrap 列宽，但我希望第三行以全宽显示。

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