引导程序：使输入与按钮对齐
Answers:
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 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">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control">
</div>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>右侧的组按钮
<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提供的答案进行投票。
Twitter Bootstrap 2
Bootstrap提供了一个.input-append类，该类可用作包装器元素并为您更正此错误：
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>正如@OleksiyKhilkevich在其答案中指出的那样，还有第二种对齐方式input和button使用.form-horizontal类的方法：
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>差异
这两个类之间的区别是.input-append将元素放置在button上方input（因此它们看起来像是已连接），在元素.form-horizontal之间将放置空格。
- 注意 -
为使input和button元素彼此相邻而没有间距，在类font-size中将设置为（这消除了元素之间的白色间距）。如果要使用或尺寸覆盖默认值，这可能会对元素中的字体大小产生不利影响。0.input-appendinline-blockinputem%
.input-append上课。
margin-bottom: 9px但按钮没有，因此它们不会占用相同的垂直空间。由于两个元素都具有middle垂直对齐，因此按钮会由于该差异而偏移。使用.input-append包装器将删除此边距底值。
您可以使用input-group button属性将按钮直接应用于输入字段。
引导程序3和4
<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 Input-Group doc了解更多示例。
<div class="form-group input-group-btn">
只是抬起头，似乎有一个特殊的CSS类，称为 form-horizontal
input-append还有另一个副作用，即它将font-size降为零
font-size: 0并学到新的东西:)谢谢！
使用.form-inline =这将使标签和行内块控件向左对齐，以实现紧凑的布局
示例：http : //jsfiddle.net/hSuy4/292/
<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]
)form-inline适用于Bootstrap3。谢谢。
我首先尝试了一下，但最后我想分享一些变更。这是对我有用的代码（找到随附的屏幕截图）：
<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>希望这可以帮助。
style="width:0;"？
<div class="col-md-4">不需要这样的元素包装width: 0
我也在同一个问题上挣扎。我使用的引导程序类不适用于我。我想出了一种解决方法，如下所示：
<form action='...' method='POST' class='form-group'>
<div class="form-horizontal">
<input type="text" name="..."
class="form-control"
placeholder="Search People..."
style="width:280px;max-width:280px;display:inline-block"/>
<button type="submit"
class="btn btn-primary"
style="margin-left:-8px;margin-top:-2px;min-height:36px;">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>基本上，我覆盖了“ form-control”类的display属性，并使用了其他样式属性来校正大小和位置。
结果如下：
引导程序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><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>