使用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") 
} 

我没有写所有的输入，但你明白了。