如何将 MVC Bootstrap 布局更改为具有多个列

Question

我在 MVC5 中使用了脚手架，它为表单创建了标准的默认单列布局。有些表格太长了，不能单列，所以我想把它修改成多列，如图所示。我一直在搞乱，form-group，row，col-md-*，form-inline ...但是格式以一种或另一种方式错位。

解决方案必须非常简单，正确组合 css 标签并与 MVC 框架配合使用。

脚手架标准布局和css

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

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

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

有人可以提供一个示例，说明评论表单的名称、电子邮件和网站，如图所示与视图中的数据绑定一起使用吗？

谢谢

@zgood - 你的回答有一个小问题，不确定你是否知道如何解决它。

• 我将 div 内的标签与其他文本框一起移动，并删除了提到的水平和内联
• 当你以某种方式展开它时，带有多个单词的标签会错位。不过只要一个字就好了。有没有快速解决方法？感谢您的回答。

Answer 1

你尝试过这样的事情吗？

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

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

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

将您想要的所有字段包装在<div class="row"> 中，然后创建您想要的col-（在本例中为<div class="col-sm-4">）并将您的form-groups 放在这些列中。另外，我可能会从您的<form> 中删除任何form-horizontal 或form-inline 引导类