使用 bootstrap 显示 MVC 表单的正确方法

Question

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

我正在使用 bootstrap 来设置 2 列文本框及其相关标签。
不幸的是，当它到达最后一个 EditorFor 时，它显示的与其余部分不一致。
我使用的 div 和列选项有误吗？
另外，我将如何在文本框的顶部和底部之间添加一些 space？
在 css 中使用填充？

我想要的是让最后一个标签从左边开始，然后文本框与其对齐，并占据该列中 space 的其余部分，也许可以添加一点space 在行之间。

这是我视图中的代码

@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; }

这是当前的显示方式。

Answer 1

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

使用 bootstrap 显示 MVC 表单的正确方法

Correct way to display a MVC Form using bootstrap

html

css

c#

model-view-controller

twitter-bootstrap