Question

我正在努力争取在bootstrap模式中的同一行上获得一个下拉列表和按钮。我尝试过使用＆lt;，span＆gt;但它没有用。

<div class="col-md-12 hSpacerMob">
 <div class="well"> 
        using (Html.BeginForm("AddPlayerSignup", "SignupSheet"))
        {
          @Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
              <span>
                  @Html.SubmitButton("Add", true, new { @class = "btn btn-primary" })
               </span>
         }
       @Html.ActionLink("Pause", "ChangeState", "SignupSheet", new { Paused = true }, new { @class = "btn btn-warning" })
    </div>
  </div>

所以我需要下拉菜单＆＃39;添加＆＃39;按钮位于彼此相邻的同一行，下方是暂停按钮，但是当它们显示时，它们只是显示在彼此下方。

编辑：我尝试使用行但是也无效

  <div class="row">
    <div class="col-md-6">
        @Html.DropDownList("Member", ladder.SignupSheet.GroupMembers, new {label = "Members", @class = "pull-left form-control", @style = "width:200px"})
    </div>    
    <div class="col-md-6">
        @Html.SubmitButton("Add member", true, new {@class = "btn btn-primary"})
    </div>
</div>

Answer 1

bootstrap具有输入组，用于组合您可能想要尝试的输入和按钮

<div class="input-group">
  @Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
  <div class="input-group-btn">
    @Html.SubmitButton("Add", true, new { @class = "btn btn-primary" })
  </div>
</div>

Answer 2

我终于弄明白了这个问题！我的提交按钮对'容器'布尔有一个'true'重载，当它应该是假的。将它设置为true会添加“表单操作”样式，这会添加一个margin-top：30px元素。因此，只要我将其设置为false，它就会起作用。

<div class="row">
    <div class="col-md-6">
        @Html.DropDownList("Member", ladder.SignupSheet.GroupMembers, new {label = "Members", @class = "pull-left form-control", @style = "width:200px"})
    </div>    
    <div class="col-md-6">
        @Html.SubmitButton("Add member", false, new {@class = "btn btn-primary"})
    </div>
</div>

在引导程序中将2个元素保留在同一行上

2 个答案: