css - 同一行中彼此相邻的下拉文本框和按钮 - Bootstrap

Question

需要下拉菜单、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>

但是没有对齐。bootstrap 的新手，任何方向都会有很大的帮助。

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