Bootstrap input-group替换addon为表单提交按钮并保留布局的实现方法

没问题，我帮你调整代码，既能让按钮提交表单，又完全保留当前的布局样式。

修改后的完整代码 #

<form action="你的提交地址" method="POST">
  <div class="col-md-6 col-md-offset-3">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control" placeholder="eg: restaurant templates">
      <div class="input-group-btn">
        <button type="submit" class="btn btn-primary">Search</button>
      </div>
    </div>
  </div>
</form>

关键改动说明 #

• 替换容器类型：把原来的<span class="input-group-addon">换成<div class="input-group-btn">，这是Bootstrap输入组中放置可交互按钮的标准容器，能保证按钮和输入框完美对齐。
• 改用可提交按钮：把span标签改成<button>元素，并设置type="submit"，这样点击按钮就会触发表单提交动作。
• 补充表单标签：原来的代码没有包裹在<form>里，必须加上表单标签并指定action（提交地址）和method（请求方式），按钮才能正常提交数据。
• 保留原有样式：继续使用btn btn-primary类，保持和原来一样的蓝色按钮外观。

这样修改后，按钮既能提交表单，布局和原来的完全一致，没有任何视觉差异。

内容的提问来源于stack exchange，提问作者Kevin himch