Bootstrap：将输入与按钮对齐

为什么按钮和输入在 Bootstrap 中不能很好地对齐？

我尝试了一些简单的事情，例如：

<input type="text"/><button class="btn">button</button>

该按钮大约是5px低于 chrome/firefox 中的输入。

Twitter 引导程序 4

在 Twitter Bootstrap 4 中，可以使用以下方式对齐输入和按钮input-group-prepend and input-group-append类（参见https://getbootstrap.com/docs/4.0/components/input-group/#button-addons https://getbootstrap.com/docs/4.0/components/input-group/#button-addons)

左侧的分组按钮（前置）

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

右侧的分组按钮（追加）

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Twitter 引导程序 3

正如 @abimelex 的答案所示，输入和按钮可以通过使用来对齐.input-group类（参见http://getbootstrap.com/components/#input-groups-buttons http://getbootstrap.com/components/#input-groups-buttons)

左侧的群组按钮

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

右侧的分组按钮

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

添加此解决方案是为了使我的答案保持最新，但请坚持投票@abimelex 提供的答案 https://stackoverflow.com/a/22592382/681807.

Twitter 引导程序 2

Bootstrap 提供了一个.input-append类，它作为包装元素并为您纠正这个问题：

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

正如@OleksiyKhilkevich 在他的回答中指出的，还有第二种对齐方式input and button通过使用.form-horizontal class:

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

差异

这两个类的区别在于.input-append将放置button反对input元素（所以它们看起来像是相连的），其中.form-horizontal将在它们之间放置一个空格。

- 笔记 -

为了允许input and button元素彼此相邻且没有间距，font-size已设置为0 in the .input-append类（这会删除之间的白色间距inline-block元素）。这可能会对字体大小产生不利影响input元素，如果你想使用覆盖默认值em or %测量。