bootstrap：使用按钮对齐输入
本文翻译自：bootstrap: align input with button
Why don't buttons and inputs align well in bootstrap? 为什么按钮和输入在引导程序中没有很好地对齐？ I tried something simple like: 我尝试过一些简单的事情：
The button is about 5px lower than the input in chrome/firefox. 该按钮比chrome / firefox中的输入低约5px。
#1楼
参考：https://stackoom.com/question/IxFK/bootstrap-使用按钮对齐输入
#2楼
Twitter Bootstrap 3 Twitter Bootstrap 3
As shown in the answer by @abimelex, inputs and buttons can be aligned by using the .input-group classes (see http://getbootstrap.com/components/#input-groups-buttons ): 如@abimelex的回答所示，可以使用.input-group类对齐输入和按钮（请参阅http://getbootstrap.com/components/#input-groups-buttons ）：
Group button on the left side 左侧的组按钮
Group button on the right side 右侧的组按钮
This solution has been added to keep my answer up to date, but please stick your up-vote on the answer provided by @abimelex . 添加此解决方案是为了使我的答案保持最新状态，但请坚持对@abimelex提供的答案进行投票 。
Twitter Bootstrap 2 Twitter Bootstrap 2
Bootstrap offers an .input-append class, which works as a wrapper element and corrects this for you: Bootstrap提供了一个.input-append类，它作为一个包装元素并为您纠正：
As pointed out by @OleksiyKhilkevich in his answer, there is a second way to align input and button by using the .form-horizontal class: 正如@OleksiyKhilkevich在他的回答中指出的那样，有第二种方法可以使用.form-horizontal类来对齐input和button ：
The Differences 差异
The difference between these two classes is that .input-append will place the button up against the input element (so they look like they are attached), where .form-horizontal will place a space between them. 这两个类之间的区别在于.input-append会将button放在input元素上（因此它们看起来像是附加的），其中.form-horizontal将在它们之间放置一个空格。
-- Note -- - 注意 -
To allow the input and button elements to be next to each other without spacing, the font-size has been set to 0 in the .input-append class (this removes the white spacing between the inline-block elements). 为了允许input和button元素彼此相邻而没有间距， .input-append类中的font-size已设置为0 （这将删除inline-block元素之间的白色间距）。 This may have an adverse effect on font-sizes in the input element if you want to override the defaults using em or % measurements. 如果要使用em或%度量覆盖默认值，这可能会对input元素中的字体大小产生负面影响。
#3楼
Just the heads up, there seems to be special CSS class for this called form-horizontal 只是抬头，似乎有一个特殊的CSS类，这个叫做form-horizontal
input-append has another side effect, that it drops font-size to zero input-append有另一个副作用，它将font-size降为零
#4楼
Use .form-inline = This will left-align labels and inline-block controls for a compact layout 使用.form-inline =这将左对齐标签和内联块控件以实现紧凑的布局
Example: http://jsfiddle.net/hSuy4/292/ 示例： http ： //jsfiddle.net/hSuy4/292/
.form-horizontal = Right align labels and float them to the left to make them appear on the same line as controls which is better for 2 column form layout. .form-horizontal =右对齐标签并将它们浮动到左侧，使它们与控件显示在同一行上，这对于2列表单布局更好。
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Examples: http://twitter.github.io/bootstrap/base-css.html#forms 示例： http ： //twitter.github.io/bootstrap/base-css.html#forms
#5楼
you may use the input-group button property to apply the button direct to the input-field. 您可以使用input-group按钮属性将按钮直接应用于输入字段。
Bootstrap 3 & 4 Bootstrap 3和4
Take a look at BS4 Input-Group doc for many more examples. 请查看BS4输入组文档以获取更多示例。
#6楼
style="padding-top: 8px"
Use this to shift your div up or down in your row. 使用它可以在你的行中向上或向下移动你的div。 Works wonders for me. 为我创造奇迹。