Asp.net mvc MVC创建视图的引导双列布局

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

我已经看过了，并试图让它与我的形式工作，没有太多的运气

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

剃须刀片段

<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>

@LabelFor（model=>model.SiteNumber，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.SiteNumber，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.SiteNumber，“，new{@class=“text danger”}）
@LabelFor（model=>model.AddressLineOne，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.AddressLineOne，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.AddressLineOne，“，new{@class=“text danger”}）
@LabelFor（model=>model.SiteName，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.SiteName，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.SiteName，“，new{@class=“text danger”}）
@LabelFor（model=>model.Department，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.Department，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.Department，“，new{@class=“text danger”}）

因此

AddressLineOne

应与

SiteNumber

位于同一行，

AddressLineTwo

应与

SiteName

位于同一行，依此类推

这是我通过以上第一行的尝试得到的结果：

这就是我想要的：

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

基本上

<div class="row">
    <div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you -->
        <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="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>
        <!-- Continue your first column of form groups here -->
    </div>
    <div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you-->
        <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 class="form-group">
            @Html.LabelFor(model => model.AddressLineTwo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AddressLineTwo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.AddressLineTwo, "", new { @class = "text-danger" })
            </div>
        </div>
        <!-- Continue your second column of form groups here -->
    </div>
</div>

@LabelFor（model=>model.SiteNumber，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.SiteNumber，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.SiteNumber，“，new{@class=“text danger”}）
@LabelFor（model=>model.SiteName，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.SiteName，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.SiteName，“，new{@class=“text danger”}）
@LabelFor（model=>model.AddressLineOne，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.AddressLineOne，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.AddressLineOne，“，new{@class=“text danger”}）
@LabelFor（model=>model.AddressLineTwo，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.AddressLineTwo，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.AddressLineTwo，“，new{@class=“text danger”}）

基本上

<div class="row">
    <div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you -->
        <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="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>
        <!-- Continue your first column of form groups here -->
    </div>
    <div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you-->
        <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 class="form-group">
            @Html.LabelFor(model => model.AddressLineTwo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AddressLineTwo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.AddressLineTwo, "", new { @class = "text-danger" })
            </div>
        </div>
        <!-- Continue your second column of form groups here -->
    </div>
</div>

@LabelFor（model=>model.SiteNumber，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.SiteNumber，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.SiteNumber，“，new{@class=“text danger”}）
@LabelFor（model=>model.SiteName，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.SiteName，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.SiteName，“，new{@class=“text danger”}）
@LabelFor（model=>model.AddressLineOne，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.AddressLineOne，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.AddressLineOne，“，new{@class=“text danger”}）
@LabelFor（model=>model.AddressLineTwo，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.AddressLineTwo，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.AddressLineTwo，“，new{@class=“text danger”}）

这就是你想要的

   .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>

.clearfix{
明确：两者皆有；
填充：0；
保证金：0；
高度：5px；
显示：block；}
@LabelFor（model=>model.SiteNumber，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.SiteNumber，new{htmlAttributes=new{@class=“form control”}}）