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

问题描述

问 题

我的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>                              

解决方案

不太明白你父级用 .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 还是有必要的，至少小屏幕下还是可以左对齐的。

这篇关于bootstrap - 为什么查询按钮会下沉一点点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！