將表單分成兩列

我嘗試將此表單分成兩列，這是我在此處找到的另一張票證，但它無法正常工作。（技術上說，四列 - 第一列左標籤，第二列左列，第三列右標籤，第四列右列）。不幸的是，這一切都搞砸了。這是我的觀點：將表單分成兩列

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

來源

2015-06-09 djblois

後呈現的HTML，而不是你的剃鬚刀代碼 – Shyju

@Shyju我張貼的HTML呈現在我的原貼 – djblois

我認爲這樣的方式... 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;}

來源

2015-06-10 06:21:47 sheshadri

當我去到那裏的演示全部在一列中。我錯過了什麼嗎？ – djblois

更新了我的解決方案..檢查此http://jsfiddle.net/sheshu036/z1zLo0g9/2/embedded/result/ – sheshadri

看起來不錯。謝謝，我會檢查它，以便我能理解HTML。 – djblois

將表單分成兩列

回答

相關問題