为什么在bootstrap中按钮和输入不能很好地对齐? 我尝试了一些简单的方法,比如。
<input type="text"/><button class="btn">button</button>
在chrome/firefox中,按钮比输入低了5px左右!在此输入图片描述
正如@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>
<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提供的答案]上(https://stackoverflow.com/a/22592382/681807)。
Bootstrap提供了一个.input-append
类,它作为一个包装元素,为你纠正了这个问题。
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
正如@OleksiyKhilkevich在他的回答中指出的,还有一种方法可以通过使用.form-horizontal
类来对齐input
和button
。
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
这两个类的区别是:.input-append
将把button
放在input
元素的上方(所以它们看起来是连在一起的),而.form-horizontal
将在它们之间放置一个空格。
-- 注意--
为了让input
和button
元素彼此相邻而没有间距,在.input-append
类中,font-size
被设置为0
(这消除了inline-block
元素间的白色间距)。如果你想用 "em "或"%"来覆盖默认值,这可能会对 "input "元素中的字体大小产生不利影响。
使用.form-inline = 这将使标签和inline-block控件左对齐,以达到紧凑的布局
<br>。
例如:
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = 右对齐标签并向左浮动,使其与控件出现在同一行,这对2列表单布局更有利。
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)