MVC的Bootstrap兩列布局創建視圖

Question

我使用MVC引導爲我的一個表單創建了一個標準的創建視圖。然而，這種形式在單一列布局中有太多的輸入字段，它太長而且看起來很愚蠢，無法將空白浪費在正確的位置。

我已經看過這個question，並試圖讓它與我的表單一起工作，沒有太多的運氣。

簡而言之，我希望地址字段位於右側，符合所有其他字段。

剃刀片段

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

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


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

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

所以AddressLineOne應在同一行SiteNumber，AddressLineTwo應該是在同一個rowas SiteName等等等等。

這是我得到的第一行上面的嘗試：

而這正是我想要的：

如何做到這一點，而將標籤和標準間距保留在左側。

Answer 1

這是你想要的。

.clearfix{ 
    clear: both; 
    padding: 0; 
    margin: 0; 
    height: 5px; 
    display: block;} 


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

     <div class="col-md-6"> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.AddressLineOne, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.EditorFor(model => model.Department, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.Department, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

基本上

<div class="row"> 
    <div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you --> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.SiteNumber, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.SiteName, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.SiteName, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <!-- Continue your first column of form groups here --> 
    </div> 
    <div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you--> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.AddressLineOne, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.AddressLineTwo, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.AddressLineTwo, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.AddressLineTwo, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <!-- Continue your second column of form groups here --> 
    </div> 
</div>