使用 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

不清楚您想要实现什么。模拟的屏幕截图会很棒。看来您不应该到处放置“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")
}

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