使用引导程序显示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表单的正确方法

回答

相关问题