Bootsrap input-form-addon height未对齐

Question

Bootstrap的input-form-addon没有对齐，如下面的屏幕截图所示。我没有找到任何解决方案，看了很多问题。

我已经尝试使用CSS来修复.input-form-addon的高度，但它并没有改变。我的代码中是否有任何错误？我使用Contact form 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>

谢谢。

Answer 1

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

工作代码段

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;