引导：将输入与按钮对齐 [英] 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>

此按钮比chrome / firefox中的输入低约5px。

The button is about 5px lower than the input in chrome/firefox.

推荐答案

Twitter Bootstrap 3

如@abimelex的答案所示，输入和按钮可以通过使用 .input-group 类（请参阅 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>

右侧的群组按钮

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>

此解决方案已添加以保持我的答案最新，但请坚持您的投票 @abimelex提供的答案。

This solution has been added to keep my answer up to date, but please stick your up-vote on the answer provided by @abimelex.

Bootstrap提供 .input-append 类作为包装器元素，并为您更正此：

Bootstrap offers an .input-append class, which works as a wrapper element and corrects this for you:

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

正如@OleksiyKhilkevich在他的回答中指出的，有另一种方法来对齐输入和按钮使用 .form-horizo​​ntal >

As pointed out by @OleksiyKhilkevich in his answer, there is a second way to align input and button by using the .form-horizontal class:

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

差异

两个类是 .input-append 会将按钮放在输入元素（因此它们看起来像是附加的）， .form-horizo​​ntal 将在它们之间放置一个空格。

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.

- 注 -

允许输入和按钮元素彼此相邻而没有间距， font-size 已设置为<类（ inline-block）中的白色间距（code> 0 元素）。如果要使用 em 覆盖默认值，这可能会对输入元素中的字体大小产生不利影响％测量。

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). This may have an adverse effect on font-sizes in the input element if you want to override the defaults using em or % measurements.

这篇关于引导：将输入与按钮对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！