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

问题描述

我用的脚手架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的其他文本框中，并删除了水平并如上所述内联


• 当您以某种方式展开它时，包含多个单词的标签会错位。它是确定，如果它只是一个字。有快速修复吗？感谢您的回答。

<$>

解决方案

p $ p> < 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 = > ，然后创建 col - （< div class =col-sm-4 > ），并将 form-groups 放在这些列中。此外，我可能会从您的中删除​​任何 form-horizo​​ntal 或 form-inline < form>

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.

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

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

Thanks

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

• I moved the label inside the div with the other text boxes and deleted the horizontal and inline as mentioned
• when you expand it a certain way, the labels with more than one words are mis-aligned. It's ok if it's just one word though. Is there a quick fix for that? thanks for the answer.

解决方案

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>

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