具有自定义字体大小和输入组的引导程序

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。