在Bootstrap中如何让两个元素在同一行上保持对齐

Question

我正在努力在 Bootstrap 模态框中将下拉菜单和按钮放在同一行。我尝试了使用 <span>，但它没有起作用。

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

所以我需要下拉菜单和“添加”按钮在同一行，并且暂停按钮位于下面，但是现在它们只是一个接一个地显示在下面。

编辑：我尝试使用“row”但是也不起作用。

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

- BMills

---

已经忘记了 row！ - Khairul Islam

我尝试了row，但它没有起作用。 - BMills

我唯一成功让它们对齐的方法是使用粗暴的方式改变margin-top属性，但这会导致容器太大并留下太多空间。这个问题真的很烦人。:( - BMills

@BMills，将来在提问时，您可能需要添加您尝试过的内容（例如row）。 - Joshua Drake

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>

- JamieD77

---

每日提醒：我遇到的每个问题都已经有人遇到过了。 - Félix Adriyel Gagnon-Grenier

Answer 2

我终于找到了问题所在！我的提交按钮的 'container' 布尔值有一个 'true' 过载，而它应该是 false。将其设置为 true 会添加 'form actions' 样式，其中包括一个 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>

- BMills