如何更改的MVC引导布局有多个列 [英] How do I change the MVC Bootstrap layout to have more than one columns

问题描述

我已经用在MVC5脚手架，并创造了形式标准的默认单列布局。某些形式的太长须单列，所以我想如图片所示将其修改成多列。我一直在，形态组，行，列，MD- *，形成内联乱搞......但格式是不对齐的这种或那种方式。

I have used the Scaffolded in MVC5 and it created the standard default single column layout for the form. Some forms are just too long to be single column, so I wanted to modify it into multiple columns as shown in the picture. I have been messing around with, form-group, row, col-md-*, form-inline...but the formatting is misaligned one way or another.

该解决方案必须是pretty简单的用CSS标签的正确组合，并与MVC框架的工作。

The solution has to be pretty simple with the right combination of css tags and works with the MVC framework.

脚手架标准布局和CSS

The scaffolded standard layout and 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>

可有人请提供姓名，电子邮件和网站评论表单的一个例子作为证明，从视图中的数据绑定工作？

Can someone please provide a an example of the name, email and website for the comment form as shown that works with the data bind from the view.?

感谢

@zgood - 你的答案适用于轻微的问题，如果不知道你知道如何解决它。

@zgood - your answer works with a slight issue, not sure if you know how to fix it.

• 我感动与其他文本框里面的div标签和提到删除水平和内联


• 当展开它一定的方式，与一个以上的字的标签是不对齐。它的确定，如果它只是一个词，但。是否有一个快速解决是什么？感谢您的回答。

推荐答案

你有没有尝试过这样的事情？

Have you tried something like this?

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

总结你在＆LT想要的领域; DIV CLASS =行＆GT; 然后创建山坳 - 是你想要的（＆LT; D​​IV CLASS =COL-SM-4＆GT; 在这种情况下），把你的表单组这些列中。另外，我可能会删除任何表单水平或表格内联自举类从 ＆LT;形式为GT;

Wrap all the fields you want in a <div class="row"> then create the col-'s you want (<div class="col-sm-4"> in this case) and place your form-groups inside those columns. Also, I would probably remove any form-horizontal or form-inline bootstrap classes from your <form>

这篇关于如何更改的MVC引导布局有多个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！