bootstrap：使用按钮对齐输入

本文翻译自：bootstrap: align input with button

Why don't buttons and inputs align well in bootstrap? 为什么按钮和输入在引导程序中没有很好地对齐？ I tried something simple like: 我尝试过一些简单的事情：

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

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 左侧的组按钮

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

Group button on the right side 右侧的组按钮

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

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类，它作为一个包装元素并为您纠正：

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

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 ：

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

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/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.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-horizo​​ntal =右对齐标签并将它们浮动到左侧，使它们与控件显示在同一行上，这对于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

<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><!-- /input-group -->

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. 为我创造奇迹。