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

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

使用twitter bootstrap定位表单输入

1 个答案: