asp.net-mvc - Bootstrap MVC 创建 View 的两列布局

Question

我已经使用 MVC Bootstrap 为我的一个表单搭建了一个标准的创建 View 。然而，这个表单有太多的输入字段，无法在单列布局中使用，它太长了，浪费右边的空白似乎很愚蠢。

我看过这个question并试图让它与我的表格一起工作，但运气并不好。

简而言之，我希望地址字段位于右侧，与所有其他字段一致。

Razor 片段

<div class="row">
    <div class="col-sm-4">
        <div class="form-group">
            @Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SiteNumber, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="form-group">
            @Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.AddressLineOne, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>


<div class="form-group">
    @Html.LabelFor(model => model.SiteName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.SiteName, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Department, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Department, "", new { @class = "text-danger" })
    </div>
</div>

所以 AddressLineOne应该与 SiteNumber 在同一行, AddressLineTwo应该在同一行 SiteName等等等等。

这就是我对第一行的上述尝试得到的结果:



这就是我想要的:



我如何实现这一点，同时将标签和标准间距保持在左侧。

Answer 1

这就是你想要的。

   .clearfix{
    clear: both;
    padding: 0;
    margin: 0;
    height: 5px;
    display: block;}


<div class="row">
        <div class="col-md-6">
            <div class="form-group">
                @Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.SiteNumber, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.SiteName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.SiteName, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                @Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { @class = "control-label col-md-3" })
                <div class="col-md-9">
                    @Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AddressLineOne, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-3" })
                <div class="col-md-9">
                    @Html.EditorFor(model => model.Department, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Department, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>
</div>