使用引導程序顯示MVC表單的正確方法

我正在使用表單捕捉用戶的各種項目，但我似乎無法讓它們以我想要的方式顯示。使用引導程序顯示MVC表單的正確方法

我使用bootstrap有2列文本框及其相關標籤。
不幸的是，當它到達最後一個EditorFor時，它與其餘的顯示不一致。
我使用div和列選項是否錯誤？
另外我將如何去在文本框的頂部和底部之間添加一些空間？
在css中使用填充？

我想要的是最後一個標籤從左邊開始，然後文本框與它一致並佔據該列的其餘空間，也許在行之間添加一點空間。

下面是代碼在我看來

@model iskbv5.Models.Vendor 

@{ 
    ViewBag.Title = "Add New Vendor"; 
} 

<h2>@ViewBag.Title</h2> 


@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <hr /> 
    <div class="form-group"> 
     <div class="control-label col-md-2"> 
      Vendor Name 
     </div> 
     <div class="col-md-4"> 
      @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="control-label col-md-2"> 
      Vendor Website 
     </div> 
     <div class="col-md-4"> 
      @Html.EditorFor(model => model.Website, new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="control-label col-md-2"> 
      Vendor Address 
     </div> 
     <div class="col-md-4"> 
      @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="control-label col-md-2"> 
      Vendor Username 
     </div> 
     <div class="col-md-4"> 
      @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control " } }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="control-label col-md-2"> 
      User Managing the Vendor 
     </div> 
     <div class="col-md-4"> 
      @Html.EditorFor(model => model.ManagingUser, new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="control-label col-md-2"> 
      Vendor Password 
     </div> 
     <div class="col-md-4"> 
      @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="control-label col-md-2"> 
      Reason We Use the Vendor 
     </div> 
     <div class="col-md-4"> 
      @Html.EditorFor(model => model.Usage, new { htmlAttributes = new { @class = "form-control" } }) 
     </div> 
    </div> 
     <div class="col-md-12"> 
      <input type="submit" value="Create" class="btn btn-xs btn-primary" /> or 
      <a href="@Url.Action("Index")" class="btn btn-xs btn-default">Cancel</a> 
     </div> 
     }

我有使用屬性設置爲

[DataType(DataType.MultilineText)] 
public string Usage { get; set; }

這是它目前如何顯示。

來源

2015-01-09 Greyhammer

您的列（'col-md-4'等）需要有一個圍繞它們的元素，即「行」。所以''div class ='row'>'例如。但不知道這是你唯一的問題。 – muttley91

甜的是固定之間的空間和最後一行是內聯，但他們似乎有點偏移右側。 http://i.imgur.com/80qHvRe.jpg – Greyhammer

啊，經過一些調整，並在每個「行」之間添加
，我就得到了期望的外觀。謝謝。 http://i.imgur.com/a7ZX3Ld.jpg – Greyhammer

啊，做了一些調整，並在每個「行」之間增加一個<br/>後，我得到了想要的樣子。謝謝。 enter image description here

來源

2015-02-18 22:31:41 Greyhammer

使用引導程序顯示MVC表單的正確方法

回答

相關問題