Question

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

我正在使用bootstrap有两列文本框及其相关标签不幸的是，当它到达最后一个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/>，我得到了理想的外观。谢谢。 enter image description here

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

1 个答案: