如何更改 MVC Bootstrap 布局以具有多列

Question

我使用了 MVC5 中的脚手架，它为表单创建了标准的默认单列布局。有些表格太长了，不能是单列，所以我想把它修改成多列，如图所示。我一直在搞乱，表单组，行，col-md-*，表单内联...但是格式以某种方式未对齐。

通过 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 bootstrap 类

如何更改 MVC Bootstrap 布局以具有多列

How do I change the MVC Bootstrap layout to have more than one columns

css

model-view-controller

asp.net-mvc

twitter-bootstrap

twitter-bootstrap-3