引导：将input与buttonalignment
为什么button和input在自举中不alignment？ 我尝试了一些简单的事情：
<input type="text"/><button class="btn">button</button> 该button比chrome / firefox中的input低大约5px。 
Twitter Bootstrap 3
如@abimelex的答案所示，input和button可以使用.input-group类alignment（请参阅http://getbootstrap.com/components/#input-groups-buttons ）：
在左边的组button
<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>
分组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>
此解决scheme已被添加，以保持我的答案是最新的，但请坚持你对@abimelex提供的答案的投票权。
Twitter Bootstrap 2
Bootstrap提供了一个.input-append类，它作为一个包装器元素，为你纠正这个问题：
<div class="input-append"> <input name="search" id="search"/> <button class="btn">button</button> </div>
正如@OleksiyKhilkevich在他的回答中所指出的，还有第二种方法通过使用.form-horizontal类来alignmentinput和button ：
<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在.input-append类中已经被设置为0 （这消除了inline-block元素之间的白色间隔）。 这可能会对input元素中的字体大小产生负面影响，如果您想使用em或%测量覆盖默认值。
您可以使用input组button属性将button直接应用于input字段。
Bootstrap 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组文档的更多的例子。
就在头上，似乎有一个特殊的CSS类，称为form-horizontal
input附加有另一个副作用，它将字体大小为零
使用.form-inline =这将为一个紧凑的布局左alignment标签和内嵌块控件
例如： http : //jsfiddle.net/hSuy4/292/
<div class="form-inline"> <input type="text"> <input type="button" class="btn" value="submit"> </div>
.form-horizontal =右alignment标签并将它们向左浮动，使它们与控件相同，这对于2列表单布局更好。
(eg Label 1: [textbox] Label 2: [textbox] : [button] )
示例： http ： //twitter.github.io/bootstrap/base-css.html#forms
我首先试了一下，最后几乎没有什么变化，我想分享一下。 这里是适合我的代码（find附件截图）：
<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>
希望这可以帮助。
<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>
我尝试了所有上述代码，并没有解决我的问题。 这是为我工作。 我使用了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>
我也在同样的问题上挣扎。 我使用的引导类没有为我工作。 我想出了一个解决方法，如下所示：
<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>
基本上，我重写了“表格控制”类的显示属性，并使用其他样式属性来校正大小和位置。
以下是结果：
不直接相关，除非你有类似的代码，但我只注意到一个奇怪的行为，内联，bootstrap 3.3.7
我没有使用行和单元格，因为它是一个桌面项目，如果开始标记在表格下面（在这种情况下）：
<table class="form-inline"> <form> <tr>
表单元素将堆叠。
开关，它正确排列。
<form> <table class="form-inline"> <tr>
Safari 10.0.2和最新的Chrome没有任何区别。 也许我的布局是错的，但不是很宽容。
style="padding-top: 8px"
用这个在你的行中上下移动你的div。 为我工作奇迹。
