html - Bootstrap 输入组 1px 差异

Question

我在模态对话框中使用输入组。并且按钮比其他元素少 1px。我该如何解决它，为什么我有这个错误？我使用 Bootstrap 3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="buttons input-group col-sm-offset-1 col-sm-9">
    <input type="number" min="1" value="1" class="form-control" />
    <span class="input-group-addon">ks</span>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default glyphicon glyphicon-remove color-red"/>
    </span>
</div>

Answer 1

对我来说，错误是因为舍入错误。

有这个样式规则

.btn {
    line-height: 1.42857;
}

应该是

.btn {
    line-height: 1.42857143;
}

事实证明，在其他 SASS 文件中导入 bootstrap 会导致精度损失。 SASS 编译过程需要标志 --precision 8 才能正常工作。

但是，对于您来说，如另一个答案中所述，您只需要将图标放在另一个标签中即可。

<span class="input-group-btn">
    <button type="button" class="btn btn-default color-red">
        <span class="glyphicon glyphicon-remove"></span>
    </button>
</span>