将表格分成两列

时间：2015-06-09 16:40:00

标签： asp.net-mvc twitter-bootstrap view

我尝试将此表单拆分为我在此处找到的另一张票证的两列，但它无法正常工作。 （技术上有四列 - 第一列左侧标签，第二列左侧字段，第三列右侧标签，第四列右侧字段）。不幸的是，这一切都搞砸了。以下是我的观点：

    @using (Html.BeginForm("EditTechTicket", "Ticket", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <div class="container">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <form class="form-large">

            <div class="left-col"> 

                <div class="form-group">
                    @Html.LabelFor(model => model.OpenUserId, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <span style="font-weight:normal;">@Html.DisplayFor(model => model.OpenUser.FullName)</span>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.OpenDate, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <span style="font-weight:normal;">@Html.DisplayFor(model => model.OpenDate)</span>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.CloseDate, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <span style="font-weight:normal;">@Html.DisplayFor(model => model.CloseDate)</span>
                    </div>
                </div>
            </div>
            <div class="right-col">

                <div class="form-group">
                    @Html.LabelFor(model => model.CategoryId, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <span style="font-weight:normal;">@Html.DropDownList("CategoryId", null, htmlAttributes: new { @class = "form-control" })</span>
                        @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.TechnicianId, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <span style="font-weight:normal;">@Html.DropDownList("TechnicianId", null, htmlAttributes: new { @class = "form-control" })</span>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.TicketStatusId, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <span style="font-weight:normal;">@Html.DropDownList("TicketStatusId", null, htmlAttributes: new { @class = "form-control" })</span>
                        @*<span style="font-weight:normal;">@Html.DropDownListFor(model => model.TicketStatus, (IEnumerable<SelectListItem>)ViewBag.StatusId)</span>*@
                    </div>
                </div>
            </div>
        </form>

            <hr />

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Update" class="btn btn-default" />
                </div>
            </div>
        </div>
}

这是我添加到bootstrap.css文件中的代码：

.form-large {
    /*max-width: 884px;*/
    padding: 15px 15px 10px;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #d6d6d6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.left-col {
    /*display: inline-block;*/
    width: 442px;
}
.right-col {
    /*display: inline-block;*/
    width: 442px;
}

这是呈现的代码：

<form action="/Ticket/EditTechTicket/f2780334-6f2b-4a68-8733-a8d7d6cd28cc" method="post"><input name="__RequestVerificationToken" type="hidden" value="9yy11Toj0Cg4Tse3jDfhf6L8ETk651NHGW_t-u0wWIlsgmzBS6ay7sk0eJif1pmr0tFT5dYyXxvJwMRnIxiJ2ZmfrChgnXVZlJgZQR9-0GM1" />    <div class="container">
        <hr />

        <form class="form-large">

            <div class="left-col"> 

                <div class="form-group">
                    <label class="control-label col-md-2" for="OpenUserId">Ticket Owner</label>
                    <div class="col-md-10">
                        <span style="font-weight:normal;">Daniel Blois</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="OpenDate">Opened</label>
                    <div class="col-md-10">
                        <span style="font-weight:normal;">5/26/2015</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="CloseDate">Closed</label>
                    <div class="col-md-10">
                        <span style="font-weight:normal;">5/26/2015</span>
                    </div>
                </div>
            </div>
            <div class="right-col">

                <div class="form-group">
                    <label class="control-label col-md-2" for="CategoryId">Category</label>
                    <div class="col-md-10">
                        <span style="font-weight:normal;"><select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select></span>
                        <span class="field-validation-valid text-danger" data-valmsg-for="CategoryId" data-valmsg-replace="true"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="TechnicianId">Technician</label>
                    <div class="col-md-10">
                        <span style="font-weight:normal;"><select class="form-control" id="TechnicianId" name="TechnicianId"><option value="00000000-0000-0000-0000-000000000000">Daniel Blois</option>
<option value="999600fc-709e-4463-84ad-d26894babb54">Mike Smith</option>
</select></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="TicketStatusId">Status</label>
                    <div class="col-md-10">
                        <span style="font-weight:normal;"><select class="form-control" id="TicketStatusId" name="TicketStatusId"><option value="00000000-0000-0000-0000-000000000000">Active</option>
<option value="a297c792-1224-4605-8a72-48d218d569e6">Deffered</option>
<option value="553f4c93-4a72-44bd-a9ce-fab4f87d4e08">Closed</option>
</select></span>

                    </div>
                </div>
            </div>
        </form>

            <hr />

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Update" class="btn btn-default" />
                </div>
            </div>
        </div>
</form>

1 个答案:

答案 0 :(得分：1)

我这样假设...... DEMO

HTML部分： 

    <div class="col-md-12 col-xs-12" >
    <div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
    <label for="exampleInputName">Ticket Owner</label></div>
        <div class="col-md-4 col-xs-4">
   <label for="exampleInputName2">Daniel Blois</label>
    </div></div> 
        <div class="col-md-6 col-xs-6">
 <div class="col-md-4 col-xs-4">
    <label for="exampleInputEmail2">Opened</label>
            </div>
               <div class="col-md-4 col-xs-4">
    <label for="exampleInputEmail2">5/26/2015</label>
      </div></div>
    </div>

        <div class="col-md-12 col-xs-12" >
    <div class="col-md-6 col-xs-6">
<div class="col-md-4 col-xs-4">
    <label for="exampleInputName2">Closed</label></div>
        <div class="col-md-4 col-xs-4">
   <label for="exampleInputName2">5/26/2015</label></div></div> 
        <div class="col-md-6 col-xs-6">
 <div class="col-md-4 col-xs-4">
    <label for="exampleInputEmail2">Category</label>
            </div>
               <div class="col-md-4 col-xs-4">
   <select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select>
      </div></div>
     </div>

 <div class="col-md-12 col-xs-12" >
     <div class="col-md-6 col-xs-6">
 <div class="col-md-4 col-xs-4">
    <label for="exampleInputEmail2">Technician</label>
            </div>
               <div class="col-md-4 col-xs-4">
   <select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select>
      </div></div>
     <div class="col-md-6 col-xs-6">
 <div class="col-md-4 col-xs-4">
    <label for="exampleInputEmail2">Status</label>
            </div>
               <div class="col-md-4 col-xs-4">
   <select class="form-control" id="CategoryId" name="CategoryId"><option value="00000000-0000-0000-0000-000000000000">Microsoft Office</option>
</select>
      </div></div>
    </div>

添加 CSS 

.col-xs-12{margin-bottom: 5px;}
.col-md-12 {margin-bottom: 5px;}
相关问题
最新问题