트위터 부트 스트랩을 사용하여 양식 입력 배치하기

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

달성하려는 목표가 명확하지 않습니다. 실물 크기의 스크린 샷이 좋습니다. "form-inline"클래스를 온통 배치해서는 안되는 것 같습니다. 예를 들어, 보통이 클래스는 contol-group 요소에 배치되지 않습니다. 코드가 엉망이지만 난 너무 열심히 보지 않았다. 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") 
} 

입력 사항을 모두 적어 두었지만 아이디어를 얻을 수있었습니다.