Bootstrap组按钮表单

Question

我正在使用sb-admin模板，因为下面有组按钮，我在侧边栏中停留在我的表单中。原始代码是这样的：

<input type="text" class="form-control" placeholder="Search...">
 <span class="input-group-btn">
  <button class="btn btn-default" type="submit">
  <i class="fa fa-search"></i>
 </button>
</span>

输出是：

但是当我添加表单标签时：

<form>
    <input type="text" class="form-control" placeholder="Search...">
     <span class="input-group-btn">
      <button class="btn btn-default" type="submit">
      <i class="fa fa-search"></i>
     </button>
    </span>
</form>

它变成这样：

这有快速解决方法吗？谢谢。

Answer 1

您在<div class="input-group">字段前缺少input。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button"> <i class="fa fa-search"></i></button>
      </span>

    </div>
    <!-- /input-group -->
  </form>
</div>

Answer 2

这是一种方法，但您需要使用CSS来调整padding/height或input或button的{​​{1}}，以便它们相等

DEMO

both