Как управлять шириной поля формы в Bootstrap?

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> 

******* Update ******** Изменено один из полей в этой

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