为什么查询按钮会下沉一点点？

Question

我的bootstrap代码如下，可是查询按钮对不齐，明显下沉了一点点，请问为什么？

<form role="form" class="form-inline">
     <div class="container">
         <div class="row">
             <div class="col-md-3 form-group">
                 <label class=" control-label " for="#m">邮件</label>
                 <input id="m" type="text" class="form-control" placeholder="">
             </div>
             <div class="col-md-3 form-group">
                 <label class=" control-label" for="#n">邮件</label>
                 <input id="n" type="text" class="form-control" placeholder="">
             </div>
             <div class="col-md-3 form-group">
                 <label class=" control-label" for="#o">邮件</label>
                 <input id="o" type="text" class="form-control" placeholder="">
             </div>
             <div class="btn btn-group">
                 <button class="btn btn-primary" type="submit">查询</button>
             </div>
         </div>
     </div>
 </form>                              

Answer 1

不太明白你父级用 .btn 和 .btn-group 的目的

.btn 样式有 padding 导致下沉

- <div class="btn btn-group">
+ <div class="col-md-3 from-group">
    <button class="btn btn-primary" type="submit">查询</button>
</div>

感觉 .from-group 并没有什么意义，但 .col-md-3 还是有必要的，至少小屏幕下还是可以左对齐的。

Answer 2

 <div class="**btn btn-group**">
                 <button class="btn btn-primary" type="submit">查询</button>
 </div>

改成

  <div class="**from-group**">
                 <button class="btn btn-primary" type="submit">查询</button>
  </div>