我如何改變MVC引導佈局有一個以上的列

Question

我已經使用在MVC5腳手架，它創造了形式標準的默認單列布局。有些表單太長而不能成爲單列，所以我想將其修改爲多列，如圖所示。我一直在搞亂，form-group，row，col-md- *，form-inline ...但是格式不一致。

該解決方案必須非常簡單，正確組合使用css標籤並與MVC框架協同工作。

腳手架標準佈局和CSS

<div class="form-group"> 
     @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } }) 
      @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

可有人請提供證明，從視圖中的數據綁定工作的姓名，電子郵件和網站的評論形式的一個例子。？

感謝

@zgood - 你的答案的作品有輕微的問題，如果不知道你知道如何解決它。

• 我感動與其他文本框格內標籤和刪除的水平和內嵌提到
當你展開它以某種方式
• ，與多個字標籤是未對齊的。沒關係，但它只是一個字。有沒有快速解決這個問題？感謝你的回答。

Answer 1

你有沒有嘗試過這樣的事情？

<div class="row"> 
     <div class="col-sm-4"> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-4"> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
     </div> 

     <div class="col-sm-4"> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
     </div> 
    </div> 

總結所有你在<div class="row">要區，然後創建所需的col-的（<div class="col-sm-4">在這種情況下），把你的form-groups這些列中。另外，我可能會從你的<form>