【问题标题】:keeping 2 elements on the same line in bootstrap在引导程序中保持 2 个元素在同一行
【发布时间】:2015-12-11 23:30:51
【问题描述】:

我正在努力在引导模式中的同一行上获取下拉列表和按钮。我试过使用 但它不起作用。

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

所以我需要在同一行上的下拉菜单和“添加”按钮彼此相邻,以及下方的暂停按钮,但就目前而言,它们只是显示在彼此下方。

编辑:我尝试使用行,但这也不起作用

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

【问题讨论】:

  • 已经忘记了row
  • 我试过行,但没有用。
  • 我设法让它们排成一行的唯一方法是使用改变边缘顶部属性的钝力方法,但这会导致井太大并留下太多空间的不良后果以下。这个问题太烦人了。 :(
  • @BMills 将来您可能想在提出问题时添加您尝试过的内容(例如row)。

标签: html asp.net-mvc twitter-bootstrap


【解决方案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>

【讨论】:

  • 每日提醒,我遇到的每一个问题都已经遇到过
【解决方案2】:

我终于找到了问题所在!我的提交按钮有一个“容器”布尔值的“真”重载,而它应该是假的。将其设置为 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>

【讨论】:

    猜你喜欢
    • 2020-02-02
    • 2021-06-04
    • 2020-09-06
    • 1970-01-01
    • 1970-01-01
    • 2014-09-17
    • 1970-01-01
    • 2018-04-04
    • 2013-10-25
    相关资源
    最近更新 更多