0

いくつかの入力フィールドをフォームに配置しようとしていますが、何を試してもうまくいきません。各入力にラベルを付けてフォームをページの中央に配置し、入力に2つまたは3つを1行に配置したいと考えています。何を試しても、すべてが中心から外れているか、何もしていないようです。どんな助けでも大歓迎です。私のコードは以下の通りです：

@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>
}
4

1 に答える 1

0

何を達成したいのか明確ではありません。モックアップのスクリーンショットは素晴らしいでしょう。「フォームインライン」クラスを全体に配置するべきではないようです。たとえば、通常、このクラスは 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")
}

私はすべての入力を書いたわけではありませんが、アイデアはわかります。

于 2013-07-14T21:16:59.407 に答える