我也在为同样的问题而挣扎。我使用的引导类并不适合我。我想出了一个变通办法，如下所示:

<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”的显示属性，并使用其他样式属性来纠正大小和位置。

结果如下:

推特引导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覆盖默认值，这可能会对输入元素中的字体大小产生不利影响。

提醒一下，似乎有一个特殊的CSS类叫做form-horizontal

Input-append还有另一个副作用，它将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]
)

示例:http://twitter.github.io/bootstrap/base-css.html形式

引导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/

引导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输入组文档以获得更多示例。