Question

我正在使用字体大小为13px和行高1.538461538（20/13）的自定义引导程序，如您所见here。

但是当我使用input-group-input-btn输入组时元素没有对齐，因为你可以寻找here。

我应该如何配置引导程序以使用13px字体大小并保持组件对齐？带有input-group的组件的基本代码是：

<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

使用＆＃34;身高：100％＆＃34;对于这个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;输入组＆＃34;高度为34像素。因此，您的所有输入都需要具有完美对齐的大小。

Answer 2

解决方案是在乘以字体大小（13px）时，将线高的系数调整为大于目标大小（20px）的值。就我而言，1.538461538应为1.538461539。

具有自定义字体大小和输入组的Bootstrap

2 个答案: