使用twitter bootstrap定位表單輸入

Question

我試圖在表單中放置一些輸入字段，但無論我嘗試了什麼，我似乎都無法得到正確的結果。我希望將頁面放在頁面的中間位置，每個輸入都帶有標籤，並且輸入有兩到三條直到某一點。無論我嘗試什麼，一切都是偏離中心，或者它似乎沒有做任何事情。任何幫助表示讚賞。我的代碼如下：

@using (Html.BeginForm("SaveNew", "MaintainProjects", FormMethod.Post)) 
{ 
@Html.ValidationSummary(); 
<input type="submit" value="Save" /> 
@Html.Hidden("PriorityCode", "0000") 
<div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("Name") 
@Html.TextBox("Name") 
@Html.Label("Status") 
@Html.TextBox("Status") 

      </div> 
</div> 
    <div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("WatchList") 
@Html.CheckBox("WatchList") 
      </div> 
     </div> 
<div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("Goal") 
@Html.DropDownListFor(m => m.GoalID, new SelectList(Model.GoalID, "GoalID", "Goal")) 
@Html.Label("Level") 
<select name="LevelID"> 
    <option value="1">Non-TSC</option> 
    <option value="2">TSC</option> 
</select> 
      </div> 
    </div> 
<div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("Indicator") 
@Html.DropDownListFor(m => m.IndicatorID, new SelectList(Model.IndicatorID, "IndicatorID", "ProjectIndicator")) 
@Html.Label("Business") 
@Html.DropDownListFor(m => m.LOBID, new SelectList(Model.LOBID, "LOBId", "LOB", Model.LOBID[0].LOBId)) 
@Html.Label("Department") 
@Html.DropDownListFor(m => m.DepartmentID, new SelectList(Model.DepartmentID, "DepartmentId", "DepartmentName")) 
      </div> 
    </div> 
<p>Project Description</p> 
<div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("Business Issue") 
@Html.TextArea("BusinessIssue", new { @rows = "3" }) 
      </div> 
    </div> 
<div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("Solution") 
@Html.TextArea("Solution", new { @rows = "3" }) 
      </div> 
    </div> 
<div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("Benefits") 
@Html.TextArea("Benefits", new { @rows = "3" }) 
      </div> 
    </div> 
<div class ="control-group"> 
     <div class ="controls form-inline"> 
@Html.Label("Project Directory") 
@Html.TextBox("ProjectDirectory") 
      </div> 
    </div> 
} 

Answer 1

目前尚不清楚你想實現什麼。模擬的截圖會很棒。看起來你不應該把所有的「在線式」課都放在上面。例如，通常這個類不放在控制組元素上。儘管代碼如此混亂，但我並沒有看起來太難。檢查出TwitterBootstrapMvc。它會讓你的代碼更清潔。你將能夠用它寫這樣的東西：

@using (Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal))) 
{ 
    @Html.Bootstrap().ValidationSummary() 

    @Html.Bootstrap().ControlGroup().CheckBox("WatchList") 
    @Html.Bootstrap().ControlGroup().DropDownListFor(m => m.LOBID, new SelectList(Model.LOBID, "LOBId", "LOB", Model.LOBID[0].LOBId)) 
    @Html.Bootstrap().ControlGroup().TextArea("BusinessIssue") 
} 

我沒有寫所有的輸入，但你明白了。