Bootstrap输入组1px差异

Question

我在模态对话框中使用输入组.按钮比其他元素少1px.我该如何修复它,更不用说为什么我有这个bug呢？我使用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文件中导出导入引导导致精度损失.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>

Answer 2

这是由于在按钮上使用字形图标引起的，并且似乎是引导程序的错误。使用

 .input-group-btn>.glyphicon {margin-top: -1px;}

要解决这个问题。

http://fiddle.jshell.net/85m5mwsg/2/