按钮水平内联文本框Razor View

Question

我在视图上有以下表格

@using (Html.BeginForm("AddInterest", "Club", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <hr />
        <div class="row">
            <div class="col-md-8">
                <div class="well bs-component">
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <h3>Not listed? - Add extras here</h3>
                        </div>
                    </div>
                    @Html.HiddenFor(model => model.ClubTypeId)
                    @Html.HiddenFor(model => model.ClubId)
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        <div class="row col-md-offset-1 col-md-11">
                            <div class="col-md-4">
                                @Html.LabelFor(model => model.InterestName, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.InterestName, "", new { @class = "text-danger" })
                            </div>
                            <div class="col-md-5">
                                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model =>  model.Description, "", new { @class = "text-danger" })
                            </div>
                            <input type="submit" value="Add" class="btn btn- success" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

除了提交按钮水平内嵌与标签而不是编辑框之外，一切都很好，我怎样才能让它下拉？

即

标签标签

文本框文本框按钮

不是

标签标签按钮

文本框文本框

目前显示如下：

Answer 1

您应该按照以下模式重新创建表单：

 <div class="form-group">
     @Html.LabelFor(model => model.InterestName, htmlAttributes: new { @class = "col-md-4 control-label" })
     <div class="col-md-8">
         @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
         @Html.ValidationMessageFor(model => model.InterestName, "", new { @class = "text-danger" })
     </div>                          
  </div>
  <div class="form-group">
      @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "col-md-4 control-label" })
       <div class="col-md-8">
           @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
           @Html.ValidationMessageFor(model =>  model.Description, "", new { @class = "text-danger" })
       </div>
  </div>
  <div class="form-group">
      <div class="col-md-offset-4 col-md-8">
           <input type="submit" value="Add" class="btn btn-success" />
       </div>
  </div>

http://getbootstrap.com/css/#forms-horizontal

的更多信息

修改

如果您希望它们垂直内联：

<form class="form-inline">
  <div class="form-group">
     @Html.LabelFor(model => model.InterestName)
     @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
  </div>
  <div class="form-group">
    @Html.LabelFor(model => model.Description)
    @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
  </div>
  <input type="submit" value="Add" class="btn btn-success" />
</form>

http://getbootstrap.com/css/#forms-inline

的更多信息

修改2

如果您希望它们水平内联但在两列中并且提交按钮右对齐：

<form>
    <div class="col-md-4">
        <div class="form-group">
            @Html.LabelFor(model => model.InterestName)
            @Html.EditorFor(model => model.InterestName, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="col-md-4">
         <div class="form-group">
            @Html.LabelFor(model => model.Description)
            @Html.EditorFor(model => model.Description, new {  htmlAttributes = new { @class = "form-control" } })
         </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
              <button type="submit" class="btn btn-default" style="margin-top: 25px;">Add</button>
        </div>
     </div>
</form>