Css 具有3+；模板引导视图中单行上的输入字段

我正在使用脚手架进行ASP.NETMVC模型的首次开发

创建的视图看起来不错，但它们的布局是每行一个字段。在某些地方，我试图让多个字段显示在一行上，但找不到最好的方法来实现这一点，同时仍然让输入字段显示良好的格式

生成的razor代码如下所示：

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

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

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

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

---

如果我去掉所有的引导CSS类，我可以这样做，但是我会丢失输入字段的良好格式。

首先，每个

表单组都会自动获得自己的行。它使用了一个clearfix来确保没有其他东西围绕它。第二，即使没有，您的每个标签/字段组合也会消耗12列。因为在引导网格中只有12列可以使用，所以每一列都可以换行

这里有两种选择。如果您希望在同一行的同一标签下有多个字段，只需将它们全部放在
表单组中的
col-md-10
div中即可：

<div class="form-group">
    <label class="control-label col-md-2" for="@Html.IdFor(m => m.FirstName)">Name</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-4">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-4">
                @Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.MiddleName, "", new { @class = "text-danger" })
            </div>
            <div class="col-md-4">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

不过，使用此选项时，您可能应该避免使用
表单水平布局，只需将标签堆叠在字段顶部即可。否则，标签将占用太多的水平空间

不过，所有这些都只是基本的引导网格标记。处理表单元素这一事实没有什么特别之处。
哇，这正是我所需要的。我已经试了两天了。那么，对于第二个选项来说，什么是最干净的方法来让标签位于字段上方呢？在表单组div？Code indent fix上放置col-md-10
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

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

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