Bootstrap 内嵌文本框和搜索按钮

Question

我有搜索输入框，我希望使用带有引导表单控件外观的引导设置样式。问题是，我还希望搜索按钮与搜索框位于同一行。我认为这可以通过 form-inline 来完成，但是当我将 class form-control 添加到搜索框时，搜索按钮会被推到下一行：

<div class="input-group" >
    <div class="form-inline">
      <input id="address" type="textbox" placeholder="City or Zipcode" class="form-control" >
      <input class="btn btn-sm btn-primary" type="button" value="Search" id="addressSearch">
    </div>
</div>

http://jsfiddle.net/TLEbG/

如果我从输入文本框中删除 class="form-control" ，按钮将显示在行内：

http://jsfiddle.net/ETs9M/

如何在保持按钮内联的同时保持表单控制框样式？

Answer 1

尝试使用输入组：https://getbootstrap.com/docs/4.4/components/input-group/ 这会将按钮放在文本字段旁边并使其成为一个组件

Answer 2

这个答案来自original poster's comment：

<div class="input-group">
  <input id="address" type="text" placeholder="City or Zipcode" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button" id="addressSearch">Search</button>
  </span>
</div>

引导层：http://www.bootply.com/gVSi912QEI#