下拉文本框和按钮在同一行中彼此相邻 - Bootstrap答案

【问题标题】：Dropdown textbox & button in the same row next to each other - Bootstrap下拉文本框和按钮在同一行中彼此相邻 - Bootstrap
【发布时间】：2017-01-16 16:31:03
【问题描述】：

需要下拉菜单、 textbox1 、 textbox2 和一个按钮 o 在同一行中彼此相邻。通过阅读其他相关问题，我想出了以下内容。

.input-group-glue {
  width: 0;
  display: table-cell;
}

.input-group-glue + .form-control {
  border-left: none;
}
<div class="input-group">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Codes
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">A</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">S</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">N</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">C</a></li>
    </ul>
  <span class="input-group-glue"></span>
  <input type="text" class="form-control" value="test2" />
  <span class="input-group-glue"></span>
  <input type="text" class="form-control" value="test2" />
<asp:Button CssClass="btn btn-default" runat="server" Text="New Section" />
</div>

但是对齐不存在。新手引导，任何方向都会有很大帮助。

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

您的对齐问题是因为.form-control 及其float:left 属性尝试添加此：

.dropdown-toggle {
  float: left;
}

谨慎使用，它可能会甩掉您拥有的其他下拉按钮，但会解决您的对齐问题。

.input-group-glue {
  width: 0;
  display: table-cell;
}

.input-group-glue + .form-control {
  border-left: none;
}
.dropdown-toggle {
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Codes
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">A</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">S</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">N</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">C</a></li>
    </ul>
  <span class="input-group-glue"></span>
  <input type="text" class="form-control" value="test2" />
  <span class="input-group-glue"></span>
  <input type="text" class="form-control" value="test2" />
<asp:Button CssClass="btn btn-default" runat="server" Text="New Section" />
</div>

【讨论】：

感谢您的帮助，但是即使现在我添加了最后一个按钮，它仍然无法对齐。