为什么在引导中按钮和输入不能很好地对齐?
我尝试了一些简单的方法:
<input type="text"/><button class="btn">button</button>
这个按钮比chrome/firefox的输入低大约5px。
当前回答
提醒一下，似乎有一个特殊的CSS类叫做form-horizontal
Input-append还有另一个副作用，它将font-size降为0
其他回答
引导4:
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-success" type="button">Button</button>
</div>
</div>
https://getbootstrap.com/docs/4.0/components/input-group/
我尝试了上面所有的代码，没有一个能解决我的问题。以下是对我有效的方法。我使用input-group-addon。
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
推特引导4
在Twitter Bootstrap 4中，输入和按钮可以使用input-group-prepend和input-group-append类进行对齐(参见https://getbootstrap.com/docs/4.0/components/input-group/#button-addons)
左侧分组按钮(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>
右侧的分组按钮(追加)
<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>
推特引导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>
右侧的分组按钮
<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提供的答案进行投票。
推特引导2
Bootstrap提供了一个.input-append类，它作为一个包装器元素，为你纠正这个:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
正如@OleksiyKhilkevich在他的回答中指出的，有第二种方法通过使用.form-horizontal类来对齐输入和按钮:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
的差异
这两个类之间的区别是.input-append将按钮放在输入元素的上方(这样它们看起来就像附加的一样)，而.form-horizontal将在它们之间放置一个空格。
——注——
为了允许输入元素和按钮元素彼此相邻而没有空格，在.input-append类中将font-size设置为0(这将删除内联块元素之间的白色空格)。如果您想使用em或% measurements覆盖默认值，这可能会对输入元素中的字体大小产生不利影响。
引导5
<div class="input-group">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
引导3和4
您可以使用input-group button属性将按钮直接应用到输入字段。
<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 -->
查看BS4或BS5输入组文档以获得更多示例。
我尝试了所有这些，最后我想分享一些变化。以下是对我有用的代码(请查看附件截图):
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
如果你想看到它工作，只需使用下面的代码在你的编辑器:
<html>
<head>
<link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
</head>
<body>
<div class="container body-content">
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search text">
<span class="input-group-btn" style="width:0;">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</body>
</html>
希望这能有所帮助。
