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>

下拉文本框＆amp;按钮在同一行中彼此相邻 - Bootstrap

1 个答案: