2017-04-06 52 views
0

Bootstrap的输入窗体插件未对齐,如下面的屏幕截图所示。我已经浏览了很多问题,但没有解决方案。Bootsrap输入窗体插件高度未对齐

Can't fix the height with CSS

我试着CSS修复。输入外形插件的高度,但它不会改变。我的代码中是否有任何错误?我正在使用联系人表单7插件来生成它自己的类。

<div class="input-group input-group-lg"> 
    <span class="input-group-addon" style="height: 46px !important;"> 
     <i class="fa fa-envelope-o" aria-hidden="true" style="font-size: 14px;"> 
     </i><br> 
    </span><br> 
    <span class="wpcf7-form-control-wrap your-email"> 
     <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control input-lg" id="contact-email" aria-required="true" aria-invalid="false" placeholder="Your email"> 
    </span> 
</div> 

谢谢。

+1

删除''
的http://www.bootply.com/RhW6e1DiQL – ZimSystem

+0

取出''
应该解决的问题,任何其他情况? – bhansa

+0

它的工作,谢谢! – monsty

回答

4

只需从标记中删除<br>即可。

工作片断

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="input-group input-group-lg"> 
 
    <span class="input-group-addon" style="height: 46px !important;"> 
 
     <i class="fa fa-envelope-o" aria-hidden="true" style="font-size: 14px;"> 
 
     </i> 
 
    </span> 
 
    <span class="wpcf7-form-control-wrap your-email"> 
 
     <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control input-lg" id="contact-email" aria-required="true" aria-invalid="false" placeholder="Your email"> 
 
    </span> 
 
</div>