具有自定義字體大小和輸入組的引導程序

Question

我使用的是字體大小爲13px和行高爲1.538461538（20/13）的自定義引導程序，因爲您可以看到here。

但是，當我使用input-group和input-group-btn時，元素不會對齊，因爲您可以查找here。

如何配置引導程序以使用13px字體大小並保持組件對齊？與輸入的基團的組分的基本碼是：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-4 form-group"> 
     <label>Foo</label> 
     <div class="input-group"> 
     <input type="text" class="form-control" value="" /> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default">Go!</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

使用「高度：100％」爲此CSS第

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn 

包裝類「輸入 - 基團」具有高度34像素。所以你所有的輸入都需要有這個尺寸來完美對齊。

Answer 2

解決的辦法是在乘以字體大小（13px）時將行高的因子調整大於目標大小（20px）的值。在我的情況下，1.538461538應該是1.538461539。