Bootstrap:将输入与按钮对齐 [英] Bootstrap: align input with button

问题描述

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

我尝试了一些简单的方法:

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

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

解决方案

Twitter Bootstrap 4

在 Twitter Bootstrap 4 中，可以使用 input-group-prepend 和 input-group-append 类来对齐输入和按钮(请参阅 https://getbootstrap.com/docs/4.0/components/input-group/#button-addons)

左侧的分组按钮(前置)

<div class="input-group-prepend"><button class="btn btn-outline-secondary";type=按钮">按钮
<输入类型=文本"class =表单控件">

右侧的分组按钮(追加)

<输入类型=文本"class =表单控件"><div class="input-group-append"><button class="btn btn-outline-secondary";type=按钮">按钮

Twitter 引导程序 3

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

左侧的分组按钮

<span class="input-group-btn"><button class="btn btn-default";type=button">开始！</span><输入类型=文本"class =表单控件">

右侧的分组按钮

<输入类型=文本"class =表单控件"><span class="input-group-btn"><button class="btn btn-default";type=button">开始！</span>

已添加此解决方案以使我的答案保持最新，但请对 @abimelex 提供的答案投上赞成票.

---

Twitter 引导程序 2

Bootstrap 提供了一个 .input-append 类，它用作包装元素并为您更正:

<输入名称=搜索"id=搜索"/><button class="btn">button</button>

正如@OleksiyKhilkevich 在他的回答中指出的那样，还有第二种方法可以使用 .form-horizo​​ntal 对齐 input 和 button> 班级:

<输入名称=搜索"id=搜索"/><button class="btn">button</button>

差异

这两个类的区别在于 .input-append 会将 button 放在 input 元素上(所以它们看起来像它们被附加)，其中 .form-horizo​​ntal 将在它们之间放置一个空格.

-- 注意--

为了允许 input 和 button 元素彼此相邻而没有间距，已经设置了 font-size到 .input-append 类中的 0(这会删除 inline-block 元素之间的空白).如果您想使用 em 或 % 测量值覆盖默认值，这可能会对 input 元素中的字体大小产生不利影响.em>

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.

解决方案

Twitter Bootstrap 4

In Twitter Bootstrap 4, inputs and buttons can be aligned using the input-group-prepend and input-group-append classes (see https://getbootstrap.com/docs/4.0/components/input-group/#button-addons)

Group button on the left side (prepend)

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

Group button on the right side (append)

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

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.

---

Twitter Bootstrap 2

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>

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>

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.

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

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