Bootsrap輸入窗體插件高度未對齊

Question

Bootstrap的輸入窗體插件未對齊，如下面的屏幕截圖所示。我已經瀏覽了很多問題，但沒有解決方案。

我試着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> 

謝謝。

Answer 1

只需從標記中刪除<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>