![getbootstrap]( "getbootstrap")
本文介绍了Bootstrap:将输入与按钮对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么按钮和输入在 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=按钮">按钮
右侧的分组按钮(追加)
<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>
右侧的分组按钮
<span class="input-group-btn"><button class="btn btn-default";type=button">开始！</span>
已添加此解决方案以使我的答案保持最新，但请对 @abimelex 提供的答案投上赞成票.
Twitter 引导程序 2
Bootstrap 提供了一个 .input-append 类，它用作包装元素并为您更正:
<button class="btn">button</button>
正如@OleksiyKhilkevich 在他的回答中指出的那样，还有第二种方法可以使用 .form-horizontal 对齐 input 和 button> 班级:
<button class="btn">button</button>
差异
这两个类的区别在于 .input-append 会将 button 放在 input 元素上(所以它们看起来像它们被附加)，其中 .form-horizontal 将在它们之间放置一个空格.
-- 注意--
为了允许 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:将输入与按钮对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！