使用引导程序显示 MVC 表单的正确方法

Question

我正在使用表单来捕获用户的各种项目，但我似乎无法让它们以我想要的方式显示。

我正在使用引导程序来创建 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>
        }

我将 Usage 属性设置为

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

这是它当前的显示方式。

Answer 1

啊，经过一些调整，并在每个“行”之间添加<br/>，我得到了想要的外观。谢谢。